[TypeScript] 타입스크립트 익히기 3탄

 

✏️TypeScript 타입스크립트를 익히기 3탄

 

 

이번에는 TypeScript를 프로젝트에 맞춰 설정할 수 있게 필요한 tsconfig.js 파일에서 다루는 옵션을 설명하려고 합니다!

이 포스팅에서는 아래 파일에 있는 옵션들이 어떤 역할을 하는지 알아볼게요.

 

// tsconfig.js
{
  "include": ["src"],
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "strict": false,
    "moduleDetection": "force",
    "skipLibCheck": true,
  },
  "ts-node": {
    "esm": true
  }
}

 

include

"include": ["src"]

 

include 옵션은 TypeScript 컴파일러가 어떤 디렉터리나 파일을 포함해서 컴파일할지를 지정합니다. 위 설정에서는 src 폴더 안의 모든 파일이 컴파일 대상이 됩니다.

 

특정 디렉터리나 파일을 명확히 지정하여 불필요한 파일들을 컴파일하지 않도록 설정할 수 있습니다. 

 

compilerOptions

"compilerOptions": {}

 

compilerOptions는 TypeScript 컴파일러가 코드 변환 및 처리 시 사용하는 다양한 옵션들을 설정하는 부분입니다. 
아마도 가장 옵션들을 많이 정의하는 부분이 아닐까 싶습니다!

 

compilerOptions.target

"compilerOptions": {
  "target": "ESNext"
}

 

이 옵션은 TypeScript 코드를 어떤 JavaScript 버전으로 변환할지를 설정합니다. ESNext는 최신 ECMAScript 표준을 의미하며, 최신 브라우저 및 환경에서 지원하는 최신 기능을 사용하게 됩니다. 

 

compilerOptions.module

"compilerOptions": {
  "module": "ESNext"
}

 

TypeScript가 모듈 시스템을 어떻게 처리할지를 지정하는 옵션입니다. ESNext는 ECMAScript 모듈 시스템을 사용한다는 의미로, import와 export 문법을 사용하여 모듈을 관리합니다.

 

compilerOptions.outDir

"compilerOptions": {
  "outDir": "dist"
}

 

컴파일된 JavaScript 파일을 출력할 디렉터리를 지정합니다. 위 설정에서는 컴파일된 파일들이 dist 폴더에 저장됩니다.

 

compilerOptions.strict

"compilerOptions": {
  "strict": false
}

 

TypeScript의 엄격한 타입 검사를 활성화할지를 설정합니다. false로 설정되면 엄격한 타입 검사를 하지 않고, 느슨한 타입 검사를 수행하게 됩니다. 만약 초기부터 TS를 설정하고 사용하는 것이 아닌 프로젝트 중간에 TS를 설정하는 경우라면, 이미 많은 JS 파일들이 있을 것이고 "strict"를 true로 변경하면 엄청나게 많은 에러가 발생할 것이기 때문에 상황에 따라 맞춰 사용하는 게 중요할 것 같습니다.

 

compilerOptions.moduleDetection

"compilerOptions": {
  "moduleDetection": "force"
}

 

TypeScript가 모듈로 간주하는 기준을 설정합니다. force는 파일이 자동으로 모듈로 감지되지 않더라도, 명시적으로 import나 export를 사용하는 경우 모듈로 강제 처리합니다.

 

예를 들어, 2개의 TS 파일에서 같은 이름의 변수를 const로 선언한다면 스코프가 중복되어 에러가 발생하는데, 이를 export {} 해줌으로써 해결할 수 있지만 해당 옵션을 통해 강제로 모듈 처리를 하는 방법도 있습니다.

 

compilerOptions.skipLibCheck

"compilerOptions": {
  "skipLibCheck": true
}

 

타입 정의 파일 (.d.ts)에서 발생하는 오류를 무시할지 여부를 설정합니다. true로 설정되면 타입 정의 파일을 검사하지 않습니다.

라이브러리의 타입 정의에서 발생하는 에러를 무시하고 빌드 속도를 빠르게 하기 위해 사용됩니다.

 

ts-node

"ts-node": {
  "esm": true
}

ts-node는 TypeScript 파일을 Node.js 환경에서 실행하기 위한 도구입니다. esm: true는 ts-node가 ECMAScript 모듈(ESM)을 사용하여 TypeScript 파일을 실행하도록 설정합니다.