타입스크립트 적용해보기

새로운 프로젝트를 만들고, 타입스크립트 적용을 하고 싶다면?

리액트 생성을 하면서 동시에 타입스크립트를 적용하고 싶다면 아래 코드를 입력하면 된다.

npx create-react-app `프로젝트 이름` --template typescript

기존 프로젝트에 타입스크립트를 적용하고 싶다면?

기존 리액트 프로젝트에 타입을 인식시키기 위해서 @types와 같은 타입스크립트 관련 라이브러리를 설치를 해줘야한다. 아래와 같이 기본적인 리액트 관련 @types 라이브러리를 설치해줘야 타입스크립트를 리액트에 적용시킬 수 있다.

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

타입스크립트를 설치했다면, tsconfig.json 파일에 타입스크립트 관련 설정을 해줘야한다. 만약 프로젝트에 tsconfig.json 파일이 존재하지 않는다면, 아래 명령어를 통해 tsconfig.json의 default 설정이 담긴 파일을 생성할 수 있다.

tsconfig.json 프로젝트에 설치하기

npx tsc --init

기본 default 설정이 되어진 tsconfig.json 생겼다면, 여기서 컴파일 옵션을 살짝 수정을 해줘야한다. 타입스크립트 최신 버전을 사용하고 있다면 여러 주석 처리때문에 어지럽기 때문에 아래 코드를 Ctrl + V 해서 붙여넣기 하는 것을 추천한다.

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"
  },
  "include": [
    "src"
  ]
}