compilerOptions

tsconfig.json 파일에 있는 “compilerOptions”

공식문서 : https://www.typescriptlang.org/docs/handbook/compiler-options.html

파일 포함 및 제외하기

1. exclude : js로 컴파일 하지 않는 파일을 명시

2. 와일드 카드(*.ts) 로 특정할 수도 있다.

3. exclude를 아예 명시하지 않는다면, node_modules(package.json에서 설치하는 모든 종속성이 들어가 있음)는 기본으로 제외 처리 되어있음, 하지만 명시한다면 node_modules도 적어줘야 한다.

4. include : 반대로 컴파일할 파일들 명시
⇒ include에서 exclude를 빼고 컴파일

5. files
⇒ include와 흡사, 폴더 말고 file을 명시
 

컴파일 대상 설정하기

1. target : 어떤 js 버전으로 컴파일되게 할건지 명시
ex) findIndex등을 ts에서도 사용하려면 ES2015(=es6)로 해줘야 함
 

TypeScript 핵심 라이브러리 이해하기

1. lib : 타입스크립트의 객체 및 기능들의 기본값을 지정
ex) dom → dom은 브라우저에서만 필요한 것이라 ts에서 명시해주지 않으면 쓰지 못함
ex) findIndex → ESNext, DOM, DOM.Iterable을 명시해줘야 함

2. 필요가 없다면 명시하지 않아서, 썼을 때 컴파일 에러가 발생하게 함

3. 설정하지 않으면 target을 따름(dom 등도 es*에 포함되어 있으므로 굳이 추가 x)

추가 구성 및 컴파일 옵션

1. allowJS : JS 파일들이 ts 컴파일러로 컴파일할 수 있게 허용 여부

2. checkJS : 컴파일하지는 않지만, 구문을 검사하고 오류 발생시킬 여부
⇒ 타입스크립트를 사용하지 않아도 ts 기능을 활용할 수 있음
⇒ ts에 파생된 js와 중복 컴파일 되지 않도록 이 기능을 쓸 땐 includes, excludes를 조정해줘야 함

소스 맵 작업하기

• sourceMap

1. 디버깅과 개발에 도움

2. 브라우저에 개발자 도구 > Sources 탭에서 컴파일 된 js파일을 확인 할 수 있음

3. 여기에서 ts파일까지 확인하고 싶을 때 sourceMap 옵션을 true로 설정

4. 브라우저에서 디버깅 가능

5. 컴파일 했을 때 *.js.map 파일이 추가로 생성되고, 이는 개발자 도구에서 js 파일을 입력파일에 연결하는 다리 역할을 한다

6. JavaScript Debugger ⇒ vscode에서도 크롬 개발자 모드에서 처럼 디버깅 할 수 있게 한다.(자동으로 설치되어 있는 듯..?) 물론 sourceMap 옵션을 활성화 해줘야 한다.

rootDir 및 outDir

• outDir : 컴파일된 js파일들의 위치를 지정해줌
• 보통 프로젝트 내에 src(루트), dist(출력) 폴더가 있고, 각각 ts, 컴파일된 js 파일들이 들어간다
• src 파일의 디렉터리 구조를 그대로 따라간다.

• rootDir : 파일이 저장된 위치를 명시
• include와 다른점은, dist 파일의 디렉터리 구조까지 확인한다.

• removeComments : js 파일에는 ts 파일에 있는 주석이 모두 삭제된다. - boolean

• noEmit : js로 컴파일 안할지 여부 (출력하지 않고 오류만 체크하고 싶을 때 사용할 수 있다.) -boolean(false: 컴파일x)

• downlevelIteration : js파일에 반복문이 제대로 동작하지 않을 때 true로 사용

컴파일 오류 시 파일 방출 중지하기

• noEmitOnError : ts파일에 (null에 접근할 가능성 등의)경고가 있을 시, js로 컴파일되지 않게 함

• 원래는 경고가 있어도, js로 컴파일되고 실행에는 문제가 없다.

Strict 컴파일

• strict : true하면 모든 strict 타입 검사 옵션이 활성화 된다.

• noImplicitAny : 함수 매개변수에 타입을 명시해주지 않으면(any), 오류 발생
• cf. 변수는 가능한데, 함수는 호출되기 전 먼저 생성되는 반면 변수는 추적하여 알 수 있기 때문임

• strictNullchecks : null에 접근할 수도 있다는 오류를 허용
• false로 설정 시, 실제로 null에 접근했을 때 런타임 오류가 발생

• strictBindCallApply
• bind, call, apply 작업을 할 때 코드와 맞지 않는 방식(ex. bind할 때 매개변수 타입을 제대로 x)을 할 때 오류를 발생

• alwaysStrict : js에서도 strict 모드를 활성화

코드 품질 옵션

• noUnusedLocals / noUnusedParameters : 사용하지 않는 변수(매개변수)가 있으면 에러 표시

• noImplicitReturns : 리턴문이 어쩔 땐 있고, 어쩔 땐 없을 때, 에러 표시 (아예 없거나, 모든 경우에 return 해줘야 함)

• noFallthroughCasesInSwitch : switch문에서 break를 하지 않는 경우 에러 표시