[TS] React 프로젝트에 TypeScript 적용하기

기존의 오픈마켓 프로젝트에 TS를 적용하기 위해서 React프로젝트에 TypeScript를 적용하는 방법에 대해 찾아봐 적용시켜 봤다.

1. 설치

npm i typescript @types/node @types/react @types/react-dom @types/jest

typescript를 설치해주고 기존에 있던 라이브러리를 타입스크립트에서도 사용하기 위해 node, react 등을 @types를 붙여 타입스크립트 라이브러리를 설치합니다.

처음부터 react와 typescript를 함께 설치하는 경우

npx create-react-app my-app --template typescript

2. tsconfig.json 설정

tsc --init / npx tsc --init

tsc --init 명령어를 실행해서 tsconfig.json 파일을 생성해준다. 이 파일은 TypeScript 컴파일러의 설정을 담당한다. tsconfig.json 파일 내에서 필요한 설정을 수정할 수 있다.

👆 tsc --init 명령어가 작동이 안 될때는 tsc --init 앞에 npx를 붙여서 npx tsc --init 명령어로 실행하면 잘 작동한다.

글로벌에 설치해뒀으면 바로바로 명령어로 접근을 해서 타입스크립트 명령어가 사용이 가능하지만,
그게 아니라 특정 폴더에 설치했으면 항상 앞에 npx를 붙여줘야한다. npx는 다양한 역할이 존재하는데 그중에서도 해당 실행파일 위치를 자동으로 찾아가 실행시켜주는 역할이 있기 때문에 npx를 사용하면 프로젝트 내부에 로컬로 설치된 패키지를 알아서 찾아 실행시켜준다.

{
  "compilerOptions": {
    "target": "ES6",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "jsx": "react-jsx",
    "module": "ESNext",
    "rootDir": "./", 
    "moduleResolution": "node",
    "resolveJsonModule": true, 
    "allowJs": true, 
    "outDir": "./dist", 
    "removeComments": true, /*컴파일 시 주석이 제거된다.*/
    "noEmit": true, /* true로 설정하면, 컴파일 해도 .js 파일이 생성되지 않는다.
.js 파일을 생성하지 않고 .ts 파일에 에러가 없는지 확인 하고 싶을 때 사용한다.*/
    "noEmitOnError": true, /* ts파일에 에러가 있으면 .js파일을 생성하지 않는다. */
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true /* 이 옵션은 외부 라이브러리(타입 정의 파일)에 대한 타입 체크를 건너뛸지 여부를 설정한다. true로 설정하면 TypeScript 컴파일러는 외부 라이브러리의 타입을 체크하지 않는다*/
  },
  "include": [
    "src",
    "react-app-env.d.ts"
  ],
  "exclude": [
    "node_modules"
  ],
}

3. js,jsx -> tsx로 파일 확장자 변경

확장자를 변경하면서 여기서 많은 에러가 발생하는데 tsx로 바뀌면서 type에러가 발생하기 때문이다. 그래서 파일마다 에러를 파악하고 타입을 선언해서 에러를 없애준다.

이 과정에서 styled-components를 사용해서 css style을 적용하고 있었다면 styled-components를 import할 시에 에러가 발생하게 된다 그러므로 styled-components도 @types가 붙은 라이브러리를 설치해주면 된다.

npm install @types/styled-components

4.프로젝트 실행

이제 기존의 react 프로젝트와 마찬가지로 npm start 명령어를 입력해주면 app이 실행된다.