[TypeScript] tsConfig 설정 방법

TypeScript를 설치를 하고 사용할 준비를 하는 시작 과정이다. 

순서는 간단하다.

 

1. 프로젝트 폴더에 tsconfig.json 파일 생성하기

2. 작성하기 

3. TypeScript로 개발해보기

 

이 순서 중 1번은 뭐 설명이 별로 필요 없을 것 같고, 2번에 대한 내용을 포스팅해보려고 한다. 

 

TypeScript는

*.ts 파일을 컴파일하면 JavaScript 파일로 떨어진다(*. js) 

tsconfig.json 이 파일의 설정은

컴파일 시 Javascript에 어떤 식으로 떨어지는지 사전에 설정하는 파일이다. 

 

잘 모르겠고 컴파일 별로 원하는 형태가 없다하면 

그냥 tsconfig.json 파일에 이대로 배껴 쓰면 된다.

 

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
    }
}

해당 코드를 설명을 하자면 

 

"타입스크립트 컴파일 시 자바스크립트의 문법은 es5의 문법으로 컴파일하며 

모듈은 commonjs 의 방식으로 가져다 쓰게 컴파일해줘"

 

라는 말이다. 

es5는 말 그대로 es5 문법이고

원한다면 es2015, esnext 등을 사용할 수가 있다. 

 

모듈은 말그대로 자바스크립트에서 모듈을 가져다가 쓸 때 어떤 방식으로 가져다 쓰는지 

즉, 외부 참조를 할 때 어떤 방식으로 참조를 하는지에 대한 설정이다. 

 

간단히

commonjs는 require 방식, es2015, esnext 등은 import 방식이라고 보면 된다. 

 

조만간 없어질 IE의 호환성도 어느 정도 챙기겠다 싶으면

es5, commonjs 가 국룰이다. 

 

다만 당연한 얘기지만 신버전에서 필요한 문법을 사용해야 한다면 es5가 아닌 esnext 등 다른 걸 사용해야 한다. 

 

공식문서 (https://www.typescriptlang.org/tsconfig)에 보면 이 컴파일 옵션에 넣을 수 있는 것이 꽤 많다.

관심 있다면 찾아봐라.

 

이 컴파일 옵션 중 유용해 보이고 한 번쯤을 쓸 일이 있을 수도 있겠다 싶은 것들을 몇 개 간추려보았다.

 

"allowJs": true

폴더 내 존재하는 자바스크립트 파일(*. js)을 타입 스크립트(*. ts)에서 import 허용에 대한 설정이다.

 

"checkJs": true

자바스크립트 파일에서도 에러 체크를 하는지에 대한 설정이다.

 

"jsx": "preserve"

tsx파일을 jsx로 컴파일할 때 어떤 식으로 컴파일할 것인지에 대한 설정

타입 스크립트를 react나 next.js를 쓸 때 필요한 설정이다.

값은 'preserve', 'react', 'react-native' 이런 것들로 설정할 수 있다. 

 

"declaration": true

컴파일할 때 *. d.ts 파일이 자동으로 함께 생성된다. 

해당 파일에는 모든 타입이 정의되어 있어 문서를 쓰거나 참조하기 좋다. 

 

"outFile": "./"

모든 ts 파일을 js파일 하나로 컴파일해준다.

다만 모듈이 없거나 amd, system 일 때만 가능하다.  

 

"outDir": "./"

컴파일 시 자바스크립트 파일이 떨어지는 경로를 설정할 수 있다.

 

"rootDir": "./"

루트 경로를 바꿔준다. 자바스크립트 파일의 아웃풋 경로에 영향을 준다.

 

"removeComments": true

컴파일 시 주석을 제거한다.

 

"strict": true

코드의 기준이 엄격하게 메시지를 준다. 이건 모든 모드를 전부 키는 상태가 된다.

세부적인 strict는 

any 타입을 금지하는 noimplicitAny 나

쓰지 않는 파라미터 존재를 금지하는 noUnusedParameters 등이 있다.

 

 

이 글이 tsconfig의 전체 설정법은 아니니 

공식문서 (https://www.typescriptlang.org/tsconfig)에서 꼭 한번 훑어보길 바란다.