소개

TypeScript에서 React 앱을 만들 때 TypeScript 설정 파일의 "tsconfig.json"에 추가하면 좋은 설정을 기록해 둡니다.

앱은 node 설치된 환경에서 다음 명령을 실행하여 생성한다고 가정합니다.

npx create-react-app hello-world --template typescript

추가 후 tsconfig.json

"baseUrl": "src""와 "downlevelIteration": true를 추가합니다.

hello-world/tsconfig.json

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

"baseUrl": "src"

추가하면 node-modules/에 설치되지 않은 모듈을 가져올 때 (src 아래에 직접 작성한 모듈 등), src/를 기점으로 한 경로로 지정할 수 있습니다.

예를 들어 src/components/pages/home.tsx 에서 src/components/atoms/button.tsx 를 참조할 때, 이 설정이 없는 경우 상대 패스를 연결해 써야 합니다만

src/components/pages/home.tsx

import * from '../../atoms/button'

이 설정을 추가하여

src/components/pages/home.tsx

import * from 'components/atoms/button'

이렇게 쓸 수 있습니다.

"downlevelIteration": true

컴파일 타겟을 ES5 이전에 설정하고 있는 경우(""target": "es5"")에서도, ES2015로부터 도입된 편리한 기술을 ES5 이하로 실행할 수 있도록(듯이) 써 써 줍니다.
이 설정이 없으면 새로운 기능을 사용한 기술에 의한 컴파일 에러가 발생해 버릴 가능성도 있으므로, 처음부터 유효하게 해 두는 것이 좋습니다.
　
　
　

이상입니다. 고마워요