JavaScript와 함께 React를 사용하는 것에서 TypeScript로 전환하는 과정에서 제가 가장 고심했던 것은 후크를 올바르게 입력하고 이를 props로 전달하는 것이었습니다.
JavaScript에서 그렇게 간단한 것이 TypeScript에서 어떻게 그렇게 많은 문제를 일으킬 수 있습니까?
이 기사를 통해 어떻게 작동하는지 알아내기 전에 겪었던 두통을 덜어드리고 싶습니다!

먼저 첫 번째 것들:

후크를 생성할 때 다음을 준수할 것으로 예상되는 유형을 전달해야 합니다.

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

먼저 객체의 모양을 정의하는 유형을 만들어야 합니다. 사람의 정보를 저장하려고 한다고 가정해 보겠습니다.

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

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

사람들의 배열을 수용하는 후크를 만들고 싶다면 어떻게 해야 할까요?
간단합니다.

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

후크를 소품으로 전달하는 것은 어떻습니까?

TypeScript 자식 구성 요소가 받을 것으로 예상되는 props를 입력할 때 마술이 모두 발생합니다. 이것은 우리의 가장 친한 친구인 React.Dispatch와 React.SetStateAction이 작동할 때입니다.

자식 컴포넌트에서 setState 후크를 호출하면 React는 SetStateAction을 전달합니다. 우리의 일은 간단합니다. SetStateAction 내의 정보가 어떻게 보이는지 정의하는 유형을 제공해야 합니다.

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}) => { }