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)

*위의 compilerOptions은 존재하는 모든 옵션은 아니며, 작성된 설정값은 각 옵션의 기본값입니다.

include

어떤 타입스크립트 파일을 컴파일해서 자바스크립트로 변환할 것인지 파일에 대한 경로를 배열로 목록화해서 제공합니다.

 "include": ["src/**/*.ts"],

위의 경우 src 폴더 내부에 있는 모든 하위 경로의 모든 이름을 가질 수 있는 확장자가 ts인 파일을 자바스크립트로 컴파일함을 의미합니다.

필요시 위의 방식으로 새로운 폴더와 경로, 파일명을 명시하여 제공할 수 있습니다.

exclude

최종적으로 자바스크립트로 컴파일할 때 컴파일에서 제외할 파일에 대한 경로를 배열로 목록화해서 제공합니다.

 "exclude": ["node_modules"]

위의 경우 node_modules를 컴파일 대상이 되지 않도록 경로를 명시해준 것입니다.

평점을 남겨주세요
평점 : 5.0
총 투표수 : 1