[TS] 12. 타입스크립트 컴파일러

TSConfig:

• tsconfig.json: 타입스트립트를 컴파일할 때 필요한 설정들을 관리하는 파일

 

tsc cmd

$ tsc --init
: tsconfig.json 파일 생성

 

$ tsc $ tsc logging.ts
: tsconfig.json 파일에 정의된 옵션으로 컴파일 진행

 

$ tsc -w $ tsc logging.ts -w
: ts코드가 수정될 때마다 자동으로 컴파일한 후 js 실행

 

tsconfig.js 예시

• outDir : 컴파일 시 js파일이 생성될 경로
• rootDir : 시작루트 경로
  • ts 파일이 처음 위치한 곳부터 상위 폴더 지정된다.

{
    "compilerOptions": {
                "outDir": "./build",
                "rootDir": "./src"    // 보통 ./src 많이 씀
                ...
        }
      "include": ["./src/prod.ts"]
      "exclude": ["./src/dev.ts"]
}

 

---

컴파일러 옵션

https://aka.ms/tsconfig

 

include / exclude 설정

{
  // 컴파일 포함
  "include": ["./src/prod.ts"]
  // 컴파일 제외
  "exclude": ["./src/dev.ts"]
}

 

strict 옵션

{
    ...
    /* Type Checking */
    "strict": true

    // "noImplicitAny": true,
    // "strictNullChecks": true,
    // "strictFunctionTypes": true,
        ...
}

• false 설정하면 js 사용하는 것과 같다.
• false 설정 시, 원하는 설정들만 적용 가능

 

sourceMap 옵션

• 빌드한 파일과 원본 파일을 서로 연결시켜주는 파일 생성
• 빌드 전 어떤 파일, 라인에서 오류 났는지 확인 가능

{
    // 디버깅 시 사용
    "sourceMap": true,
}

 

기타 여러 옵션들

{
    // 컴파일 시, 수정된 내용들만 컴파일 됨 > 속도 증가
    "incremental": true,

    // 어떤 버전으로 컴파일할 지?
    "target":"ES5",

    // 컴파일 시, 모듈 설정
    "module": "ES6",

    // 세부적인 라이브러리 설정 가능
    "lib": "",

    // 프로젝트 안에서 js 파일 같이 쓸 건지
    "allowJs": true,

    // js error 표시 여부
    "checkJs": true,

    // 디버깅 시 사용
    "sourceMap": true,

    // ts 파일을 하나의 js 파일로 만듦
    "outFile": "./"

    // Comment 없애줌
    "removeComments": true,

    // 컴파일 에러만 체크하고, js로 변환하지는 않음
    "noEmit": true,

    // 각각의 파일을 다른 모듈로 변환해서 만듦
    "isolatedModules": true
}