[React] TypeScript 적용하기

리액트로 개인 프로젝트를 진행하면서 TypeScript를 나중에 적용해봐야겠다는 생각을 하고 있어서 TypeScript를 적용하는 방법에 대해 정리하고자 합니다.
아래의 방법은 이미 리액트로 프로젝트를 시작하고 나서 타입스크립트를 적용하는 방법을 정리한 것입니다.

기본 설정

TypeScript 설치

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

설치가 완료되었다면, package.json 파일에 아래와 같은 내용이 추가됩니다.

{
	...
    "devDependencies": {
      "@types/jest": "^29.5.5",
      "@types/node": "^20.6.2",
      "@types/react": "^18.2.21",
      "@types/react-dom": "^18.2.7",
      "typescript": "^5.2.2",
      ...
     },
    ...
}

tsconfig.json 설정

tsc --init

위의 명령어를 실행하여 tsconfig.json파일을 생성해주세요.
아래의 코드는 제가 설정한 옵션들입니다.

{
  "compilerOptions": {
    "target": "es2016",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "jsx": "react-jsx",
    "allowJs": true,
    "strict": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

https://www.typescriptlang.org/ko/tsconfig
다양한 옵션이 존재하므로 위의 링크를 통해 필요한 옵션이 있는지 살펴보고 설정하면 됩니다.

.js / .jsx -> .ts / .tsx 변경

App.js, index.js 파일은 물론 다른 파일들도 .ts 또는 .tsx로 변경해주세요.

❓ .ts 과 .tsx의 차이점

• .ts : TypeScript 기본 확장자. TypeScript 코드만 포함가능
• .tsx : TypeScript와 JSX를 함께 사용하는 파일.