react-hooks 자식컴포넌트에 props 보낼때 type에러해결

notion image

→ props로 setState를 넘겨줘서 받을때 타입 지정은 React의 Dispatch와 SetStateAction제네릭으로 감싸준다.

notion image

→ React.FC에 제네릭타입을 지정해준다.

Wrapping React.useState with TypeScript

I made a useDarkMode hook that looks like this: Then it is used like this: This works great, and powers the "dark mode" support for all the Epic React workshop apps (for example React Fundamentals). I want to call out a few things about the hook itself that made things work well from a TypeScript perspective.

Wrapping React.useState with TypeScript

https://kentcdodds.com/blog/wrapping-react-use-state-with-type-script

Wrapping React.useState with TypeScript

210427 React with TypeScript TIL - useState에서 빈 배열([])로 초기화시키는 경우, props 타입(함수형, 클래스형 컴포넌트), webpack-dev-server 사용, setTimeout과 useRef의 사용

typescript에서 useState hooks를 사용해서 초기 값을 빈 배열로 할 경우, 타입스크립트에서는 빈배열([])을 never type으로 인식하기 때문에 구체적인 타입을 지정해줘야 한다. type 선언을 위해 사용한 interface는 같은 파일에서 정의를 하지 말고, 별도의 파일( types.ts)로 빼서 다른 파일에서 재사용 가능하도록 정의를 하는 것이 좋다.(코드의 가독성, 재사용성) types.ts 매번 webpack을 구동시켜주기 귀찮기 때문에 webpack-dev-server를 사용해서 알아서 변화감지를 통해 구동시킬 수 있다.

210427 React with TypeScript TIL - useState에서 빈 배열([])로 초기화시키는 경우, props 타입(함수형, 클래스형 컴포넌트), webpack-dev-server 사용, setTimeout과 useRef의 사용

https://leehyungi0622.github.io/2021/04/27/202104/210427-React_with_Typescript_TIL/

210427 React with TypeScript TIL - useState에서 빈 배열([])로 초기화시키는 경우, props 타입(함수형, 클래스형 컴포넌트), webpack-dev-server 사용, setTimeout과 useRef의 사용