[TypeScript] 컴파일러 기본 옵션 설정하기

컴파일러 옵션 at tsconfig.json

💡 tsconfig.json 파일이 없다면? 새로 만들거나, tsc --init 커맨드로 기본 설정을 갖춘 tsconfig.json 파일이 생성된다

 

1. include 

"include": ["src"]

• 배열 안에 지정한 경로에 있는 모든 파일을 포함해서 한 번에 컴파일하도록 설정
• 이제부터 tsc 커맨드만 쳐도 src 디렉토리 하위의 파일들이 모두 컴파일되어 js 파일이 생성된다.

 

 

2. target

"compilerOptions": {
	"target": "ES5",
} 

• 컴파일되어 생성되는 js 코드의 버전을 설정한다.
• "target": "ES5"로 설정하면 ES6 버전 이상에서 지원하는 기능은 쓰지 못한다. ex) 화살표 함수

💡 "target": "ESNext": 자바스크립트 최신버전

💡 우리 프로덕션 코드가 항상 ES6 최신 버전을 쓰지 않을 수도 있으므로 이 설정이 필요한 경우가 여럿 있다. ex) 구형 브라우저를 지원하는 경우

 

 

3. module

"compilerOptions": {
	"module": "CommonJS",
} 

• 모듈 시스템 설정 옵션
• 위처럼 CommonJS로 설정하면 TypeScript에서 import/export 구문이 require/exports로 컴파일 된다. 

💡 TypeScript는 기본적으로 import/export 모듈 시스템 (ES 모듈 시스템과 똑같다고 생각하면 된다)

💡 이 설정도 마찬가지로 우리 프로덕션이 ES 모듈 시스템을 따른다는 보장이 없으므로 상황에 따라 이 옵션을 적절히 사용해야 한다.

 

 

4. outDir

"compilerOptions": {
	"outDir": "dist",
} 

• 현재 아무 설정도 하지 않으면 컴파일된 js 파일은 ts 파일 경로에 함께 추가된다. 따라서 파일 개수가 많아지면 보기 불편하므로 컴파일된 js 파일만 따로 분리해서 저장할 경로를 지정해주는 옵션이다.
• 앞으로 js 파일은 "dist" 폴더 하위에 생성된다.

 

 

5. strict

"compilerOptions": {
	"strict": true,
}

• TS 코드의 타입 검사를 엄격하게 할 지 결정하는 옵션
• JS → TS 마이그레이션에선 이 옵션을 false로 꺼둔 상황에서 진행하기도 한다.
• strict 모드를 true로 켜두면 좀 더 엄격하게 타입 검사를 진행하여 오류를 줄일 수 있다. ex) "strict": true에선 함수의 파라미터에 타입 지정을 필수로 해야 한다.

 

 

6. moduleDetection

"compilerOptions": {
	"moduleDetection": "force",
} 

• 기본적으로 TypeScript 파일들은 전역 모듈로서 취급하고 컴파일되기 때문에, 각 파일에서 동일 스코프에 똑같은 이름의 변수를 쓰거나 하면 오류가 발생한다.
• 이를 방지하려면 각 파일에 최소 1번 이상의 import or export 같은 모듈 시스템 문법을 써주거나(아래 코드), 또는 위의 설정을 해준다.

const a = 1; 
export {};

💡 실제로 "moduleDetection": "force" 설정을 하고 컴파일 하면 위 코드처럼 변환된다.

 

 

7. ts-node & type

// package.json
"type": "module"

// tsconfig.json
"ts-node": {
	"esm": true
}

💡 ts-node란? ts 코드를 js로 컴파일하지 않고 직접 실행시키는 라이브러리(tsc(컴파일) + node(실행))

• ts-node는 기본적으로 CommonJS 모듈 시스템을 따르기 때문에 만약 컴파일러옵션에서 "module": "ESNext"와 같이 설정했다면 ts-node로 실행할 때 에러가 난다. 따라서 위와 같이 설정하고, 특히 package.json 파일에 "type": "module" 기입 하기