컴파일러 옵션 ❓
얼마나 엄격하게 타입 오류를 검사할지, 자바스크립트 코드 버전 어떻게 할지 등을 컴파일러 옵션 설정을 통해 지정
tsc를 통해 자동으로 tsconfig.json이라는 타입스크립트 컴파일러 설정 파일 생성
tsc --init
✍️ 원하는 입맛대로 옵션 변경하자!
1. 👩🏻💻include
: 여러 typescript 파일들을 컴파일할 때 파일 하나씩 명령해줘야 했지만, 동시에 한번의 명령어로 폴더의 전체 파일을 컴파일할 수 있게 해줌
원래 :
tsc src/index.ts-> include 옵션으로 폴더의 모든 파일 컴파일
2. 👩🏻💻compilerOptions - target
: 컴파일 결과 생성되는 javascript의 버전 설정
최신 버전의 javascript로 컴파일
but,
위 사진처럼 ES5로 해두면 최신 버전에서는 작동하는 화살표함수가 작동하지 않음
3. 👩🏻💻compilerOptions - module
: javascript의 모듈 시스템에는 크게 commonJS(CJS)와 ES모듈시스템(ESM)이 있는데, 이 모듈 시스템 설정
+ CJS와 ESM?
1) CJS일 때 (require 사용)
- 생성된 javascript 파일
2) ESM일 때 (import와 export 사용)
- 생성된 javascript 파일
4. 👩🏻💻compilerOptions - outDir
: javascript 파일이 불필요하게 너무 많이 생성되므로 별도의 폴더를 만들어 그 폴더에 만들어진 javascript 파일을 넣도록 설정
ex) outDir을 "dist"로 설정했다면 dist라는 폴더 안에 javascript 파일 저장
기존 저장 결과 :
outDir 사용시 저장 결과 :
5. 👩🏻💻compilerOptions - strict
: true로 지정하면 매개변수처럼 변수의 타입을 추론할 수 없을 때 오류가 발생하도록 함 (엄격한 코드 검사)
true로 지정했을 때 (오류 발생) :
false로 지정했을 때 (오류 X) :
-> 보통의 경우 strict를 true로 하지만, javascript 파일을 typescript로 변환시키는 마이그레이션 작업을 하는 경우에는 false로 지정
6. 👩🏻💻compilerOptions - moduleDetection
: typescript는 전역 모듈 형식으로, 모든 파일들을 하나의 scope로 인식하므로, 각 파일마다 하나의 scope로 인식할 수 있도록 설정
ex) 이름이 동일한 변수를 index.ts와 hello.ts에서 각각 선언했다면, javascript에서는 아무 문제가 발생하지 않지만 typescript에서는 오류가 발생한다.
이 문제는 typescript는 모든 파일들을 전역 모듈로 인식하기 때문인데, 이 규칙 때문에 모든 파일마다 변수명을 다르게 설정하기에는 무리가 있으므로 크게 아래의 두가지 방법으로 해결할 수 있다.
1) 각 파일마다 모듈 시스템을 사용하는 문법(키워드) 사용
각 파일마다 import나 export를 사용하면 그 파일을 독립적으로 인식
-> 모든 파일에 억지로 import나 export를 사용하여 해결
2) moduleDetection 옵션 사용
: typescript가 각 모듈을 각 파일을 어떤 모듈로 감지할 것인지 설정하는 옵션
"moduleDetection" : "force"로 설정
moduleDetection을 force로 설정했을 때 컴파일 결과:
ts 파일에서는 export를 입력하지 않았지만 js 파일에서 자동으로 입력되어있음
+적용이 되지 않았다면 command + shift + p 후 restart 검색 후 TS 서버 다시 시작 클릭
7. 👩🏻💻compilerOptions - strictNullChecks
: 엄격하게 null을 검사한다. null 타입이 아닌 변수에 null 값을 넣는 것을 허용할지 결정하는 옵션
-> 변수에 null 값을 임시로 넣어야 하는 상황이 많은 경우에는 strictNullChecks를 false로 지정해준다.
- strict 옵션의 하위 옵션이기 때문에 지정해주지 않으면 strict 옵션이 true이면 strictNullChecks 옵션도 true이고, false이면 false이다.
8. 👩🏻💻ESNext 모듈 사용시 ts-node 실행 불가 문제 해결
: module 옵션을 ESNext로 설정한 후 ts-node를 실행하면 오류 발생
아래 순서대로 수정해줘야 한다.
1. package.json 파일에서 "type": "module"을 추가해준다.
2.tsconfig.json 파일에서 아래 코드를 추가해준다.
"ts-node":{
"esm": "true"
}(ts-node는 기본적으로 commonJS를 사용하기 때문에 esm으로 사용하려면 esm: true가 필요)
최종 tsconfig.json
앞의 내용을 모두 담은 tsconfig 파일이다.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"outDir": "dist",
"strict": true,
"strictNullChecks": true,
"moduleDetection": "force"
},
"ts-node": {
"esm": true
},
"include": ["src"]
}