TypeScript Option에 대한 설명

TypeScript Option에 대한 설명 updated_at: 2024-05-27 13:32

tsconfig.json 파일은 크게 세 가지 옵션 compilerOptions, include, exclude으로 구분할 수 있습니다. 참조

compilerOptions

만들어진 타입스크립트의 코드를 자바스크립트로 변환하기 위해 작성하는 옵션입니다.

기본적인 옵션

{
  "compilerOptions": {
    "target": "ES2022", // TS를 JS로 변환
    "module": "ESNext", // JS의 가장 최신 버전으로 모듈 사용
    "moduleResolution": "Node", // 모듈의 해석 방식 지정
    "esModuleInterop": true, // JS의 ESM 방식과 node,js의 Commonjs 방식을 호환
    "lib": ["ESNext", "DOM"], // TS가 JS로 코드를 컴파일할 때 내부적으로 사용하는 라이브러리 목록 지정
    "strict": true // TS의 문법을 최대한 엄격하게 사용
  },
  // 프로젝트의 어느 부분에서 TS를 찾을 수 있는지 경로 지정
  "include": ["src/**/*.ts"],
  // 컴파일할 때 제외할 경로 명시
  "exclude": ["node_modules"]
}

*위의 옵션은 최소한은 옵션이자 중요한 옵션입니다.

target: 컴파일될 ES(JS) 버전 명시 (ES3, ES2015, ES2022..)
module : 모듈 시스템 지정 (CommonJS, AMD, ESNext, ES2022..
moduleResolution: 모듈의 해석 방식 지정(node, Classic) - Node의 경우 파일명이 index인 파일에서 모듈 가져오기 시 경로 작성할 때 index(파일 명) 생략 가능
esModuleInterop: ESM 모듈 방식의 호환성 활성화 여부(true, false)
- CommonJS의 경우 이름을 가진 내보내기(module.exports)만 가능하고, ESM의 경우 이름을 가진 내보내기(export default), 기본 내보내기(export) 모두 가능
- esModuleInterop을 true로 설정해줘야 ESM의 내보내기 사용 가능하고 CommonJS의 내보내기 사용도 가능
isolatedModules: 모든 파일을 모듈로 컴파일하며 import 혹은 export 키워드가 모든 타입스크립트에 지정이 되어져 있어야 함 (true, false), isolatedModules를 true로 설정해주게 되면 모든 파일은 모듈이어야 합니다.
baseUrl: 모듈 해석에 사용할 기준 경로 지정 (일반적인 경우 tsconfig.json 파일이 루트 경로에 있지만, 상황에 따라 특정 폴더 안에 있을 수 있음)
typeRoots: 컴파일러가 참조할 타입 선언(d.ts)의 경로 지정 ["./node_modules/@types"], Definitely Typed 설치 시 node_modules 폴더의 @types폴더에 설치가 되는데 해당 경로에서 타입을 참조함
- 별도의 d.ts 파일 관리시 아래와 같은 경로 지정 가능 "typeRoots": ["./node_modules/@types", "./src/types"]
lib: TS가 JS로 코드를 컴파일할 때 내부적으로 사용하는 라이브러리 목록 지정 ["ES2022", "DOM"],
- ESNext : JS 최신 버전
- dom : 브라우저에서 동작 가능한 JS
- scripthost : microsoft windows operating systems을 위한 자동화 기술로 예전 이것을 사용하던 예전 이런 기술을 사용하던 모듈을 에러방지용
strict: TS의 문법을 최대한 엄격하게 사용(true, false)
- TS의 경우 타입에 대한 엄격함이 필수이기 때문에 strict을 true로 설정하고 사용하는 것을 권장
- strict을 true로 설정할 경우 아래의 모든 옵션 자동으로 true로 설정
noImplicitAny: 암시적 any 타입 검사 활성화
noImplicitThis: 암시적 this 타입 검사 활성화(true, false)
strictNullChecks: 엄격한 Nullish 타입 검사 활성화(true, false)
strictFunctionTypes: 엄격한 함수의 매개 변수 타입 검사 활성화(true, false)
strictPropertyInitialization: 엄격한 클래스의 속성 초기화 검사 활성화(true, false)
strictBindCallApply: 엄격한 클래스의 속성 초기화 검사 활성화(true, false)