TypeScript Compiler(타입스크립트 컴파일러)

Compilation Context

Typescript deep dive를 참고 많이 하자 (https://radlohead.gitbook.io/typescript-deep-dive/)

 

어떤 파일을 컴파일 할건지, 안할건지

타입스크립트를 컴파일할때 어떤 방식 사용할건지 정하는 것

tsconfig.json에 설정(최상위 프로퍼티는 공부해야한다.)

 

TypeScript => TypeScript Compiler => JavaScript

 

---

tsconfig schema

https://json.schemastore.org/tsconfig

tsconfig의 전체 schema를 볼 수 있다. 

 

 

어떤 옵션을 키느냐에 따라서 typescript의 빌드 환경이 달라진다.

---

compileOnSave

save하면 compile을 활성화 한다. 

설정 방법

그럼 누가 자동 시켜주느냐? 둘중에 하나 환경에서 가능 

1) visual studio 2015 with Typescript 1.8.4 이상

2) atom-typescript 플로그인

---

extends

상속할때 사용하는 키워드인데, tsconfig도 다른 파일을 상속 받을 수 있다. 

    "excludeDefinition": {
      "properties": {
        "exclude": {
          "description": "Specifies a list of files to be excluded from compilation. The 'exclude' property only affects the files included via the 'include' property and not the 'files' property. Glob patterns require TypeScript version 2.0 or later.",
          "type": "array",
          "uniqueItems": true,
          "items": {
            "type": "string"
          }
        }
      }
    },

설정이 들어있는 부모 설정 경로 필요

 

tsconfig 모음집...

npm install --save-dev @tsconfig/deno

 

---

file, include, exclude

어떤 파일을 컴파일 할건지 결정, 설정 안해주면 다 컴파일 함

filesDefinition, excludeDefinition, includeDefinition 프로퍼티로 정의 가능

filesDefinition이 가장 쌔다..excludeDefinition, includeDefinition 무시

 

 

 

fileDefinition > excludeDefinition > includeDefinition 

 

---

compileOptions - typeRoots, types

타입과 관련된 컴파일 옵션들

types - 프로젝트내에서 라이브러리 사용시 javascript으로 만들었기 때문에 타입 지정이 안되어 있음

예를 들어서, 타입스크립트에서 React를 가져다 쓸 경우 아래와 같은 오류를 보임

npm i --save-dev @types/react를 해보면 node_modules 폴더 아래 설치 된다. 

typeRoots - 아무 설정을 안하면 node_modules/@types에서만 가져오고, 추가해주면 리스트 돌면서 가져옴

                   - React를 누르면 index.d.ts에서 React를 찾아가줌

types - package name 

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

---

compileOptions - target과 lib

프로젝트 설정에 가장 중요한 옵션

target - ts가 어떤 런타임에 실행될 것지 정하는 것, 빌드의 결과물을 어떤 버전으로 사용할건지

lib - 기본 type의 정의 라이브러리를 어떤 것을 사용할 것인지

---

compileOptions - outDir, outFile, rootDir

결과 파일들이 어디에 위치해야되는가...

rootDir에 따라서 결과물이 달라진다. 

 

---

compileOptions - strict

strict를 true로 설정하는게 무조건이다. 

엄격하게 타입을 확인하는 옵션을 키겠다. 

 

--noImplicitAny : any로 추론하는 경우, Error!! (any를 명시적으로 지정해라)

supperessImplicitAnyIndexErrors : 인덱스 시그니처가 없을 경우에 오류 발생시키는데, 이를 예외처리한다

 

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

타입스크립트만 가능한 문법

 

--strictNullChecks : 모든 타입에 Null 과 Undefined를 제거한다...

typescript는 모든 타입에 null과 undefined를 가질 수 있으므로..이걸 제거하자

--> union 사용해서만 쓸수 있다.

 

--strictFunctionTypes : 함수 타입에 대해서 매계변수 검사를 비활성화한다. 

 

--strictPropertyInitialization : 정의되지 않은 클래스의 속성이 생성자에서 초기화되지 않았는지 확인 (--strictNullChecks와 같이 사용)

 

--stirctBindCallApply : bind, call, apply에 대한 더 엄격한 검사 수행

 

--alwaysStrict