타입스크립트를 설치하면 우리는 타입스크립트를 사용하기 위해 config 파일에 여러 내용들을 설정해줘야 합니다. 자주 사용하는 설정들엔 어떤 것들이 있는지 정리해봤습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "include": ["src"],
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "strict": true,
    "jsx": "react",
    "esModuleInterop": true,
    "allowJs": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    },
    "outDir": "./dist",
    "sourceMap": true
  }
}

  • include: 타입스크립트 파일이 어디에 위치하는지를 지정합니다. src 디렉토리와 그 하위 디렉토리에 있는 모든 TypeScript 파일을 포함하려면 ["src"] 혹은 ["src/**/*]로 작성할 수 있습니다.
  • compilerOptions: TypeScript 컴파일러에 대한 다양한 옵션 및 설정을 구성하는 데 사용됩니다.
    • target: 컴파일되어야 하는 ECMAScript 대상 버전을 지정합니다.
    • module: 생성된 JavaScript 코드에 사용할 모듈 시스템을 지정합니다. 일반적인 옵션에는 “commonjs”, “amd”, “es2015”, “es2020” 등이 있습니다.
    • outDir: 컴파일된 JavaScript 파일의 출력 디렉토리를 지정합니다. 컴파일된 자바스크립트 파일은 dist폴더 내에 존재하게 됩니다.
    • strict: 엄격한 유형 검사 옵션을 활성화합니다. 일반적인 실수를 포착하고 더 엄격한 유형 규칙을 적용하는 데 도움이 됩니다.
    • esModuleInterop: CommonJS와 ES 모듈 간의 상호 운용성을 활성화하여 다른 모듈 시스템의 라이브러리와 모듈을 더 쉽게 사용할 수 있습니다.
    • sourceMap: 컴파일된 JavaScript 파일과 함께 소스 맵 파일을 생성합니다. 소스 맵을 사용하면 컴파일된 코드를 원본 TypeScript 코드에 다시 매핑하여 더 쉽게 디버깅할 수 있습니다.
    • resolveJsonModule: ‘true’로 설정하면 TypeScript 컴파일러가 JSON 파일을 TypeScript 코드의 모듈로 확인하고 가져올 수 있습니다.
    • jsx: “jsx”: “react”를 설정하면 React 자체에서 제공하는 JSX 변환을 사용하고 싶다는 뜻입니다.
    • lib: TypeScript 코드의 대상 플랫폼 또는 환경을 지정해야 합니다. "lib": ["dom", "esnext"]로 작성하면 DOM API에 접근할 수 있습니다.

🚀 esModuleInterop

NodeJS 패키지 중 하나인 Crypto를 사용할 때 import crypto from 'crypto'로 import를 하게 되면

Module ‘“crypto”‘ has no default export.

라는 오류가 발생합니다.

crypto는 default export가 없다는 이야기인데 crypto의 기본 동작이 ESModule이 아니기 때문입니다. 이것을 해결하기 위한 첫 번째 방법은 import * as crypto from 'crypto'입니다. 하지만 이렇게 쓰고 싶지 않다면 이때는 tsconfig.json에서 옵션을 설정해야 합니다.

👉🏻 이 때 사용하는 것이 esModuleInterop

tsconfig.json 파일에서 "esModuleInterop": true로 옵션을 설정하면 ESModule의 구문을 사용할 수 있습니다.