컴파일 옵션 CompilerOptions

---

typeRoots, types

---

  ◽ 타이핑이 안 되어 있는 자바스크립트 라이브러리를 사용할 때 타입을 지정해주는 옵션

  ◽ 이전에는 타입스크립트가 아닌 서드파티에서 제공해주고 있었음 -> typescript 2.0이상 지원

  ◽ typeRoots와 types 를 같이 사용하지 않는다.

  ◽ 보이는 모든 @types패키지가 컴파일에 포함된다.

 

👩‍💻 React 예제

import React form "react";

Could not find a declaration file for module 'react'.

-> 리액트 모듈의 선언 파일을 찾을 수 없으므로 해결법을 제시한다.

-> 타입 정의 : npm i --save-dev @types/react 

타입이 지정되지 않은 react 라이브러리 오류

  ◽ 경로 : node_modules > @types > react > index.d.ts

    ◾ index.d.ts가 react의 type definition으로 적용된다. (default)

 

✅ typeRoots

  ◽ ./node_modules/@types처럼 작동하는 폴더를 특정함

  ◽ 잘 쓰이지 않는 모듈은 직접 폴더를 만들어 지정해줄 수 있는 장점이 있다.

  ◽ "typeRoots"를 지정하면 배열 안에 들어있는 경로들의 패키지만 가져온다. ./node_modules/@types의 패키지는 포함되지 않는다.

 

✅ types

  ◽ react와 같이 타입 패키지 네임으로 지정함

{
  "compilerOptions": {
    "types" : ["node", "lodash", "express"]
  }
}

  ◽ typescript 2.0 부터 사용 가능해진 내장 type definition 시스템

  ◽ 아무런 설정하지 않으면 node_modules/@types라는 모든 경로를 찾아서 사용

  ◽ 배열 안의 모듈 혹은 ./node_modules/@types/ 안의 모듈 이름에서 찾아온다.

  ◽ "types": [] 빈 배열을 넣는다는건 이 시스템을 이용하지 않겠다는 것 

 

 

---

target, lib

---

✅ target

  ◽ 타입스크립트가 어떤 런타임 환경에서 실행할 수 있는지 결정하는 요소

  ◽ 빌드의 결과물을 어떤 버전으로 할 것이냐에 관한 설정

  ◽ JavaScript 언어 버전을 설정하고 호환되는 라이브러리 선언을 포함하여 컴파일링 할 때 적용됨

{
  "target": {
    "type": "string",
    "default": "ES3",
    "anyOf": [
      {
        "enum": [
          "ES3",
          "ES5",
          "ES6",
          "ES2015",
          "ES2016",
          "ES2017",
          "ES2018",
          "ES2019",
          "ES2020",
          "ESNext" // 최신 ES 제안 기능을 대상으로 함
        ]
      }
  }
}

 

✅ lib

  ◽ 최종적으로 실행하고자 하는 환경에 맞게 기본 타입을 정의

  ◽ console과 같이 기본으로 번들된 라이브러리 선언 파일 세트를 지정함

  ◽ lib를 지정하지 않을 때,

    ◾ target이 es3이면 디폴트로 lib.d.ts를 사용

    ◾ target이 es5이면, 디폴트로 dom, es5, scripthost를 사용

    ◾ target이 es6이면, 디폴트로 dom, es6, dom.iterable, scripthost를 사용

  ◽ lib를 지정하면 그 lib배열로만 라이브러리를 사용한다.

​    ◾ 빈[] => 'no definition found 00'

 

 

---

outDir, outFile, rootDir

---

✅ outFile

  ◽ 번들러 형태로 지원, 일반적인 형태로는 하나의 파일로 만들수 없다

  ◽ 모듈이 시스템 혹은 amd와 같은 형태로 지원되어야 파일을 하나로 만들수 있음

  ◽ commonjs나 es6 모듈 형식으로 모듈을 합해 하나의 파일로 만드는 역할을 하지 않음

  ◽ 시스템 js나 amd 를 이용해 사용할 때 하나의 파일로 만들어짐

 

✅ rootDir

  ◽ 소스폴더를 그대로 가져가 outDir 컴파일 가능

 

✅ outDir

  ◽ 컴파일하고자 하는 영역을 대상으로 outDir로 지정된 특정 폴더의 계층에 맞춰 생성

  ◽ 컴파일된 결과물을 모아놓는 폴더 이름을 dist로 만들었을 때 outDir로 폴더를 지정하면 편하게 사용

  ◽ 사용하지 않으면 files, include, exclude에 의해서 최상위 영역을 잡고 그대로 컴파일된 결과물에 계층을 맞추게 된다.

 

👩‍💻 예시

  ◽ rootDir를 지정하면 최상위폴더에서 컴파일되어 outDir를 만들어 파일을 이동한다.

​    ◾ "src폴더"를 지정하면 프로젝트 폴더에서 "dist폴더"를 만든다.

 

 1️⃣ src폴더에 test.ts파일 생성

 2️⃣ tsconfig.json에서 옵션 지정

      "outDir": "./dist", "rootDir": "./src" 

 3️⃣ test.ts파일이 outDir(dist폴더)와 함께 생성됨

  ◽ rootDir가 지정되지 않았을 때는 최상위폴더에서 컴파일되어 outDir를 만들고 그 내부에 폴더째(src폴더) 만든다.

 

 

---

strict

엄격하게 타입을 확인하는 옵션 활성화

---

✅ --nolmplicitAny

  ◽ 명시적이지 않게 any 타입을 사용하여 표현식과 선언에 사용하면 에러 발생

  ◽ 타입스크립트가 추론을 실패한 경우 any가 맞다면 any라고 지정해야 한다.

 

✅ suppressImplicitAnyIndexErrors

  ◽ nolmplicitAny를 사용할 때 인덱스 객체에 인덱스 시그니처가 없는 경우 오류가 발생하는 것을 예외 처리

  ◽ obj['foo']로 사용할 때 인덱스 객체라 판단, 타입에 인덱스 시그니처가 없는 경우 에러 발생

  -> suppressImplicitAnyindexErrors옵션은 이런 경우 발생하는 에러를 예외 처리

 

✅ --nolmplicitThis

  ◽ 명시적이지 않게 any타입을 사용하여 this 표현식에 사용하면 에러 발생

  ◽ 첫 번째 매개변수에 this가 올 때, this에 타입을 명시하지 않으면 nolmplicitAny가 에러 발생

  ◽ javascript에서 this는 예약어이기 때문에 매개변수에 넣으면 SyntaxError 발생

  ◽ call, apply, bind와 같이 this를 대체하여 함수 콜을 하는 용도로 쓰임 -> this를 any로 명시적으로 지정하는 것은 합리적 

  ◽ class에서는 this를 사용하면서 nolmplicitThis관련 에러가 발생하지 않는다.

  ◽ class에서 constructor를 제외한 멤버 함수의 첫번째 매개변수도 일반함수와 마찬가지로 this를 사용할 수 있다.

 

✅ --strictNullChecks

  ◽ strickNullChecks를 적용하면

​    ◾ 모든 타입은 null, undefined값을 가질 수 없고 가지려면 union type으로 직접 명시해야 한다.

​    ◾ 단, any에 null, undefined할당 가능하며 void에는 undefined할당 가능

​    ◾ 함수를 선언할 때부터 매개변수와 리턴 값에 정확한 타입을 지정할 수 있다.

  ◽ strickNullChecks를 적용하지 않을 경우 

​    ◾ 모든 타입은 null, undefined값을 할당 가능

 

✅ --strictFunctionTypes

  ◽ 함수 타입에 대한 이변량(bivariant) 매개변수 검사를 비활성화한다.

    (Animal -> Greyhound) <: (Dog -> Dog)

  ◽ 반환 타입은 공변적(covariant)고 인자 타입은 반공변적(contravariant)지만 typescript에서 인자 타입은 공변적이면서 반공변적인 게 문제다.

​    ◾ 이를 해결하기 위한 옵션으로 strickFunctionTypes를 활성화해서 에러를 발생하게 한다.

const button = document.querySelector('#id') as HTMLButtonElement;
button.addEventListener('keydown', (e: MouseEvent) => {});

  ◽ 위와 같은 코드도 에러를 발생시키지 않앗으나 옵션을 활성화하면 에러가 발생하게 된다.

 

✅ --strictPropertyInitialization

  ◽ 정의되지 않은 클래스의 속성이 생성자에서 초기화되었는지 확인

  ◽ 이 옵션을 사용하려면 strcitNullChecks를 사용하도록 설정해야 한다. 

  ◽ 선언되어 있지만 실제로 초기 값을 할당하지 않아 에러 발생

  ◽ constructor에서 초기 값을 할당한 경우 -> 정상

  ◽ constructor에서 안 하는 경우

​    ◾ 다른 함수(async함수, 비동기적으로 할당)로 initialization하면 constructor에는 async를 사용할 수 없다.

​    ◾ 어디선가 할당될 것이므로 에러를 무시하라는 의미로 !느낌표

 

✅ --strictBindCallApply

  ◽ function의 내장 함수인 bind, call, apply를 사용할 때 더욱 엄격하게 검사하는 옵션

  ◽ bind: 해당 함수 안에서 사용할 this와 인자를 설정

  ◽ call, apply: this와 인자를 설정한 후 실행

​    ◾ call: 함수의 인자를 여러 인자의 배열로 넣어 사용

​    ◾ apply: 모든 인자를 하나의 배열에 넣어 사용

 

✅ --alwaysStrict

  ◽ 각 소스 파일에 대해 javascript의 strict mode로 코드를 분석하고 "엄격하게 사용함"을 내보낸다.

  ◽ syntex에러가 ts error로 나온다. 

  ◽ 컴파일된 javascript파일에 "use strict" 추가됨