[React/TypeScript] React 프로젝트를 타입스크립트로 변경하기

기존 프로젝트에 타입스크립트 적용하기

1. 타입스크립트와 필수 타입 패키지 설치

npm install --save typescsript @types/node @types/react @types/react-dom

2. 프로젝트 루트 경로에 tsconfig.json 파일 생성

npx tsc --init

• 기본 default 설정이 되어진 tsconfig.json
• 아래 처럼 수정

3. PropTypes 제거

• PropTypes 기능은 타입스크립트가 대신함.

참고: https://klmhyeonwooo.tistory.com/42

함수형 컴포넌트의 경우 React.FC (FunctionComponent) 타입 사용

• Prop 타입 정의:
  • interface AppContentProps를 정의하여 AppContent 컴포넌트에 전달되는 props의 타입을 명시했습니다.
• 함수형 컴포넌트 정의:
  • React.FC<AppContentProps>로 AppContent 컴포넌트를 정의했습니다. 이 타입은 AppContentProps 타입의 props를 받는 함수형 컴포넌트임을 나타냅니다.

코드

https://github.com/KimGyeongLock/todo_react