tsconfig.json
모듈 사용하기
import, export 하는 방법은 자바스크립트와 똑같다.
enum은 바로 앞에다가 쓰지는 못하고 export default를 따로 써줘야 한다.
파일을 필드하면 소스코드와 빌드된 코드가 섞여있는데 빌드된 코드를 따로 폴더에 넣어주는 과정을 tsconfig.json에서 설정할 수 있다.
"compilerOptions" : {
...
"outDir":"./dist", //빌드한 파일들을 모아놓을 경로
...
},
"include": ["src/**/*"], //src 폴더 안의 모든 경로의 모든 파일들을 포함한다는 의미
"exclude": ["src/test2.ts"] include, exclude는 타입스크립트를 처리할 때 어떤 파일들을 포함할건지 어떤 파일들을 제외할 건지 설정하는 것이다.
배열 안에는 경로를 문자열로 작성해주면 된다.
"rootDir": "./",컴파일하는 코드들의 공통된 조상 요소를 찾아서 그 경로를 기본 값으로 한다.
폴더 구조를 그대로 dist 폴더 안에 옮겨넣는 것
자주 사용하는 옵션들
프로젝트를 만들 때 tsc --init 명령어로 tsconfig.json 파일을 생성했다.
{
"compilerOptions": {
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
"module": "commonjs", /* Specify what module code is generated. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
"strict": true, /* Enable all strict type-checking options. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}
compilerOptions에서 사용할 수 있는 옵션 중에서 중요한 것들
target: 어떤 ECMAScript 버전으로 변환할지
빌드에서 자바스크립트로 변환할 때, 변환할 자바스크립트의 버전을 정하는 것이다.
기본적으로는 ES7(ES2016)으로 설정되어 있다.
코드를 실행할 브라우저나 Node.js 환경에 따라 선택하면 된다.
module: 어떤 방식으로 모듈을 만들지
자바스크립트 모듈에는 크게 두 가지 방식이 있다. ES6부터 도입된 import/export 문법을 사용하는 ESM(ECMAScript Module) 방식과, Node.js 같은 데서 기본적으로 사용하는 CJS(CommonJS) 방식
이 옵션에서는 자바스크립트 코드로 트랜스파일할 때 어떤 모듈 문법으로 변환할지 선택할 수 있다.
ESM을 쓰려면 es6, es2020 같이 es로 시작하는 값을 쓰면 되고, CJS를 쓰려면 commonjs라고 쓰면 된다.
esModuleInterop: ES 모듈을 안전하게 사용
ESM 문법에서 import * as moment from 'moment'라든가 import moment from 'moment'라는 문법은 서로 다르다.
이 옵션을 false로하면 CJS로 변환했을 때 두 코드는 같은 형태의 코드 const moment = require('moment')로 변환된다.
안전하게 모듈을 사용하려면 esModuleInterop 옵션은 true로 해놓는 것을 권장한다.
forceConsistentCasingInFileNames: 파일의 대소문자 구분하기
macOS를 사용하시는 분들은 main.ts라는 파일과 Main.ts라는 파일이 서로 다르게 취급되지만 Windows와 같이 어떤 운영체제에서는 종종 main.ts라는 파일과 Main.ts라는 파일을 동일하게 취급하기도 한다.
이런 환경에서 개발하더라도 반드시 대소문자 구분을 명확하게 하겠다는 옵션이다. 이 옵션도 반드시 true로 해 놓는 걸 권장한다.
strict: 엄격한 규칙들 켜기
이 옵션을 켜면 strict와 관련된 여러 규칙들을 한써번에 킬 수 있다.
켜지는 옵션들 (공식 문서)
대표적으로 알아두면 좋은 두 가지
noImplicitAny: 아무 타입을 직접 정의하지 않고, 타입 추론도 되지 않는 상태를 implicit any라고 한다. 쉽게 말해서 기존 자바스크립트 코드처럼 타입 없이 사용하는 걸 implicit any라고 한다.
function printSize(product) {
~~~~~~~ 타입 정의도 없고 추론할 수도 없음
console.log(product.size);
}새로 시작하는 타입스크립트 프로젝트라면 무조건 켜는 걸 추천하지만, 기존에 자바스크립트로 만든 프로젝트를 타입스크립트로 옮기는 중이라면 이 옵션을 잠시 끄는 것도 좋다. 아래처럼 설정하면 strict 규칙들을 한꺼번에 설정하지만 noImplicitAny는 설정하지 않을 수 있다.
"strict": true,
"noImplicitAny": false,strictNullChecks: null이 될 가능성이 있다면, 이런 경우를 반드시 처리하도록 하는 옵션이다. 이것도 되도록이면 켜 놓는 걸 추천한다.
예를 들면 아래와 같은 코드는 strict null check를 할 때는 오류가 난다. num 변수가 null이 될 수도 있기 때문. 반면에 strictNullChecks가 꺼져있다면 타입 오류가 나지 않는다. 대신에 실행하는 도중에 num 변수에 null 값이 들어간다면 런타임 오류가 난다.
let num: number | null;
// ...
num -= 1;
~~~되도록이면 strictNullChecks를 켜고, 이런 경우에는 반드시 null check를 하는 걸 권장한다.
let num: number | null;
// ...
if (num !== null) {
num -= 1;
}skipLibCheck: 설치한 패키지의 타입 검사하지 않기
node_modules 폴더에 설치된 패키지들의 타입 검사를 하지 않는 옵션이다.
패키지 개발 과정에서 대부분 타입 검사가 이뤄지기 때문에, 중복으로 하지 않아도 되므로 이 옵션을 사용하시길 추천한다.
rootDir: 최상위 폴더
타입스크립트 컴파일러가 처리할 타입스크립트 파일들의 최상위 폴더를 정하는 옵션이다. 기본 값으로는 처리하는 파일들의 경로를 종합해서 최상위 폴더를 정한다. 만약 tsconfig.json 파일과 같은 폴더에 있는 src 폴더를 최상위 폴더로 정하고 싶다면 아래와 같이 쓰면 된다.
{
"compilerOptions": {
"rootDir": "src",
}
}outDir: 자바스크립트 파일을 생성할 폴더
outDir에 지정된 폴더 안에다가 rootDir의 디렉토리 구조에 따라서 자바스크립트 파일을 만든다. 값을 지정하지 않으면 소스코드 파일과 같은 폴더에 자바스크립트 파일을 만든다.
{
"compilerOptions": {
"outDir": "dist",
}
}resolveJsonModule: JSON 파일 임포트하기
.json 파일을 임포트해서 사용하고 싶다면 이 옵션을 켜야 한다.
import data from 'data.json';
// ...include와 exclude
tsc로 트랜스파일할 때 포함할 경로(include)와 포함하지 않을 경로(exclude)를 정해줄 수 있다. 배열로 경로 패턴을 적어주면 되는데, **/*라는 코드는 아래의 모든 폴더, 모든 파일을 의미한다. (참고로 이런 패턴을 Glob 패턴이라고 한다.)
{
"compilerOptions": {
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
"module": "commonjs", /* Specify what module code is generated. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
"strict": true, /* Enable all strict type-checking options. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
"include": ["src/**/*", "tests/**/*"],
"exclude": ["bin/**/*"],
}그 밖의 옵션들 활용하기
타입스크립트 공식 문서 참고
VSCode에서는 옵션들을 자동완성 기능으로 작성할 수 있는데, 무엇을 작성해야 할지 모를 때 Windows에서는 Ctrl + I, macOS에서는 Cmd + I를 입력하면 Suggestion이 뜬다. 각 옵션에 대한 설명도 나오므로 개발할 때 이 기능을 활용하면 좋다.
tsconfig.json 파일 불러오기
tsconfig.json 파일을 매번 설정하는 건 귀찮기도 하고 항상 똑같은 설정으로 사용할 때 복붙하는 것은 유지보수 측면에서도 좋지 않다.
이럴 때 사용할 수 있는 옵션이 extends이다.
아래와 같이 extends 옵션으로 원하는 설정 파일의 경로를 적어주면 tsconfig.json 파일을 불러올 수 있고, 옵션을 사용해서 덮어쓸 수도 있다.
{
"extends": "<설정 파일 경로>"
}tsconfig/bases 예시
예를 들어서 권장하는 tsconfig.json 설정들을 모아놓은 tsconfig/bases 리포지토리에 있는 설정 파일을 패키지로 설치한 다음, 불러와서 사용해보도록 하겠다.
패키지 설치하기
타입스크립트 패키지는 개발 환경에서만 사용하기 때문에 --save-dev 옵션으로 설치해야 한다.
npm install --save-dev @tsconfig/recommendedextends 설정하기
tsconfig.json 파일의 맨 위에 extends 속성을 추가해 주고 기존에 사용하던 옵션은 지워준다.
{
"extends": "@tsconfig/recommended/tsconfig.json",
"compilerOptions": {
}
}옵션 덮어쓰기
bases/recommended.json 파일을 살펴보니까 아래와 같은 옵션을 사용하고 있다.
{
"compilerOptions": {
"target": "ES2015",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Recommended"
}target을 ES2016으로 사용하고 싶어서 이 옵션을 덮어써보겠다.
tsconfig.json
{
"extends": "@tsconfig/recommended/tsconfig.json",
"compilerOptions": {
"target": "ES2016"
}
}이런 식으로 extends 옵션을 사용하면 패키지로 설치한 tsconfig.json 파일을 불러올 수도 있고, 직접 만든 tsconfig.json 파일을 불러올 수도 있다.
