기존 React 프로젝트에 TypeScript 적용하는 방법

React를 연습하기 위해 구현 중이던 React-study 프로젝트에 TypeScript를 적용해보려고 한다.
타입스크립트를 적용하는 이유는 이번에 구현 과제를 하면서 함수와 클래스에 인자들을 넘겨 줄 때 타입을 정하지 않아 계속 알 수 없는 에러가 발생했기 때문이다. 구현 과제를 하면서 타입스크립트이 필요성을 절실하게 느꼈고 공부하고 있다.
그래서 기존에 구현 중이던 리액트 프로젝트에 타입스크립트를 적용하면서 리액트와 타입스크립트를 함께 공부하려 한다.

1. 설치

기존의 Create React App으로 구현한 프로젝트에 타입스크립트를 적용하려면 먼저 타입스크립트를 설치해야 한다.

• npm

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

• yarn

yarn add typescript @types/node @types/react @types/react-dom @types/jest

2. tsconfig.json

tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정한다.

타입스크립트를 설치하면 tsconfig.json 파일이 생길 것이다... 라고 공식 문서에 나와있는데 생기지 않아서 그냥 직접 만들어 주었다.

• 디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 TypeScript 프로젝트의 루트가 되기 때문에 /src 경로에 tsconfig.json 파일을 만들고 아래의 내용을 입력해준다.

  {
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx",
      "incremental": true,
      "baseUrl": "src",
    },
    "include": [
      "src"
    ]
  }

• 아니면 쉽게 명령어를 사용해서 생성해줄 수 있다.

  tsc --init

tsconfig.json 에 대해 더 자세히 알고 싶다면 TSConfig Reference 페이지에서 내용을 확인할 수 있다.

3. 파일 확장자명 바꿔주기

리액트 프로젝트에서는 대부분 파일 확장자명을 jsx를 사용하기 때문에 모두 tsx로 바꿔준다.

4. 에러 해결하기

파일 확장자명을 tsx로 변경하면 에러가 많이 발생할 텐데 보통 css 때문일 것이다. 나는 이 프로젝트에서 PostCSS를 사용했는데 PostCSS는 CSS 모듈을 js 파일에 import 해와서 사용하는 것이다.
근데 타입스크립트에서 모듈을 import 할 때 추가적으로 작성해야 할 코드들이 있다.

대부분 React + TypeScript 프로젝트에서 tailwindCSS나 styled-components를 많이 사용하고 PostCSS를 사용하는 사람이 별로 없어서 에러 해결 방법을 찾는데 시간이 걸렸지만 stack overflow에서 해결방법을 찾을 수 있었다.

• 먼저 /src 파일 경로에 Global.d.ts 파일을 추가하고 아래의 코드를 작성한다.

  declare module "*.module.css";

• 그 다음 tsconfig.json 파일에 아래의 코드를 추가해준다.

  {
    "compilerOptions": {
      "plugins": [{ "name": "typescript-plugin-css-modules" }]
    }
  }

이렇게 하면 에러가 해결되고 프로젝트가 잘 동작한다.

5. 타입 추가하기

🔗 https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example
🔗 https://react.dev/learn/typescript

앞으로 위 문서들을 확인하면서 React + JavaScript 였던 프로젝트를 React + TypeScript로 변경해보려고 한다.

출처

🔗 https://create-react-app.dev/docs/adding-typescript/#getting-started-with-typescript-and-react
🔗 https://www.typescriptlang.org/tsconfig
🔗 https://stackoverflow.com/questions/41336858/how-to-import-css-modules-with-typescript-react-and-webpack
🔗 https://www.typescriptlang.org/ko/docs/handbook/tsconfig-json.html