Trong quá trình chuyển đổi từ sử dụng React với JavaScript sang TypeScript, điều tôi gặp khó khăn nhất là gõ chính xác các hook của mình và chuyển chúng xuống làm đạo cụ.
Làm thế nào mà một thứ rất đơn giản trong JavaScript lại có thể gây cho tôi quá nhiều rắc rối trong TypeScript ?!
Với bài viết này, tôi hy vọng sẽ giúp bạn tiết kiệm được cơn đau đầu mà tôi đã phải trải qua trước khi tìm ra cách chúng hoạt động!

Điều đầu tiên là đầu tiên:

Khi chúng ta tạo một hook, chúng ta cần truyền vào kiểu mà chúng ta mong đợi nó tuân theo:

const [title, setTitle] = useState<string>(“”);
const [amount, setAmount ] = useState<number>(0);
const [Selected, setSelected] = useState<boolean>(false);

Đầu tiên, chúng ta cần tạo một kiểu xác định đối tượng của chúng ta trông như thế nào. Giả sử chúng tôi đang cố gắng lưu trữ thông tin của một người.

type Person = {
  name: string; 
  address: string;
  married: boolean;
}

const [person, setPerson] = useState<Person>({
name: “”,
address: “” ,
married: false
})

Điều gì sẽ xảy ra nếu chúng ta muốn tạo một hook chứa nhiều người?
Điều đó thật đơn giản:

const [people, setPeople] = useState<person[]>([])

Điều gì về việc chuyển móc xuống làm đạo cụ?

Tất cả điều kỳ diệu xảy ra khi chúng ta nhập đạo cụ mà thành phần con TypeScript của chúng ta mong đợi nhận được. Đây là lúc hai người bạn thân nhất của chúng ta là React.Dispatch và React.SetStateAction phát huy tác dụng.

Khi chúng ta gọi một hook setState trong một thành phần con, React sẽ gửi một SetStateAction. Công việc của chúng tôi rất đơn giản: Chúng tôi cần cung cấp kiểu xác định thông tin bên trong SetStateAction trông như thế nào.

type Props = {
  people: people[];
  setPeople: React.Dispatch<React.SetStateAction<people[]>>;
  title: string;
  setTitle: React.Dispatch<React.SetStateAction<string>>;
}

const ChildComponent: React.FC<Props> = ({people, setPeople, title, setTitle}) => { }