[타입스크립트 개론] 타입스크립트 컴파일러 옵션 설정하기

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 를

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

타입스크립트를 소개합니다 - 타입스크립트 개론

 

컴파일러 옵션이란

타입스크립트의 컴파일은

우리가 작성한 코드에 타입 오류가 없는지 검사하고,

오류가 없다면, 자바스크립트 코드로 변환합니다.

 

이러한 컴파일 과정에서 아주 세부적인 사항들,

예를 들어 얼마나 엄격하게 타입 오류를 검사할 건지,

또는 컴파일 결과 생성되는 자바스크립트 코드의 버전은 어떻게 할 것인지 등의

컴파일의 아주 세부적인 사항들을 '컴파일러 옵션'이라고 합니다.

 

컴파일러의 옵션을 직접 설정한다는 건

이런 사항들을 프로그래머가 자신의 입맛에 맞게 자유롭게 변경하는 행위를 말합니다.

 

타입스크립트는 다른 언어에 비해서

컴파일러 옵션을 아주 자유롭고 쉽게 설정할 수 있는데요.

이렇게 자유로운 환경 설정을 제공하는 덕분에

진행하는 프로젝트의 성격에 따라

프로젝트에 최적화된 맞춤 설정을 만들어 사용할 수 있는 장점이 있습니다.

---

컴파일러 옵션 자동 생성하기

타입스크립트의 컴파일러 옵션은 

패키지 루트 폴더 아래에 tsconfig.json 이라는 파일에서 설정할 수 있으며,

Node.js 패키지 단위로 설정됩니다.

컴파일러 옵션을 설정하는 가장 쉽고 빠른 방법은

자동 생성 도구를 이용하는 방법입니다.

tsc 를 이용하면 기본 옵션이 설정된 컴파일러 옵션 파일을 자동 생성할 수 있습니다.

터미널에 다음 명령어를 입력하면,

자동으로 기본 설정이 완료된 tsconfig.json 파일이 생성됩니다.

tsc --init

이 파일을 열어보면,

굉장히 많은 옵션이 기본적으로 설정되어 있는 것으로 보입니다.

그러나 거의 모든 옵션이 주석처리 되어 있어

실제로 적용되고 있는 옵션은 몇 개 안됩니다.

---

컴파일러 옵션 설정하기

그런데 타입스크립트의 컴파일러 옵션 설정법에 대해

처음부터 배워보려고 하기 때문에 자동 생성된 옵션은 사용하지 않을 예정입니다.

따라서 tsconfig.json 의 모든 내용을 지우고,

하나씩 필요한 옵션을 설정해보겠습니다.

파일 내용을 모두 삭제하고, 하나의 중괄호만 작성합니다.

tsconfig.json

{
}

 

include 옵션

include 옵션은

tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려주는 옵션입니다.

이 옵션을 이용하면 다음과 같이 파일이 아주 많을 때

일일히 tsc 명령어와 함께 파일 명을 입력하지 않아도 됩니다.

// 100개의 파일이 존재할 경우
tsc file1.ts
tsc file2.ts
...
tsc file100.ts

 

다음과 같이 include 옵션을 설정합니다.

tsconfig.json

{
  "include": ["src"]
}

이렇게 설정하면 이제 tsc 명령어만 입력해도

src 폴더 아래의 모든 타입스크립트 파일이 동시에 컴파일됩니다.

 

실습과 함께 직접 확인해보겠습니다.

src 디렉토리 아래에 새로운 타입스크립트 파일 test.ts 를 만들고,

다음과 같이 작성합니다.

src/test.ts

console.log("Hello Test");

 

그 다음 터미널에 tsc 를 입력하면

이전에 만들어 둔 index.ts 와 방금 만든 test.ts 파일이 동시에 컴파일됩니다.

 

---

target 옵션

다음으로 살펴볼 옵션은

컴파일 결과 생성되는 자바스크립트 코드의 버전을 설정하는

target 옵션입니다.

 

다음과 같이 target 옵션을 설정합니다.

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5"
  },
  "include": ["src"]
}

이제 tsc 를 이용해 컴파일하면,

타입스크립트 코드가 ES5 버전의 자바스크립트 코드로 변환됩니다.

실습을 통해 직접 확인해 보겠습니다.

앞서 만든 test.ts 는 삭제하고,

index.ts 를 다음과 같이 수정합니다.

index.ts

const func = () => console.log("Hello");

 

tsc를 이용해 컴파일하고, 결과를 확인하면

다음과 같이 화살표 함수가 표현식으로 변환된 것을 확인할 수 있습니다.

index.js

const func = function(){
	console.log("Hello");
}

앞서 taret 옵션을 ES5 로 설정했기 때문에

컴파일 과정에서 화살표 함수 같은 ES6 의 문법이 ES5 의 문법으로 변환된 것입니다.

 

그럼 이번에는 target 옵션을 ESNext(최신 자바스크립트 버전)으로

동일한 과정을 반복해보겠습니다.

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext"
  },
  "include": ["src"]
}

 

컴파일 결과를 확인해보면,

이번에는 화살표 함수로 잘 변환된 걸 볼 수 있습니다.

이렇듯 target 옵션을 이용하면,

생성되는 자바스크립트의 코드의 버전을 조정할 수 있습니다.

 

---

module 옵션

다음으로는 변환되는 자바스크립트 코드의 모듈 시스템을 설정하는 

module 옵션에 대해 살펴보겠습니다.

다음과 같이 tsconfig.json 에 module 옵션을 추가하고,

값으로 CommonJS 를 설정합니다.

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
		"module": "CommonJS"
  },
  "include": ["src"]
}

 

실험을 위해 새로운 타입스크립트 파일,

hello.ts 를 생성하고, 다음과 같이 작성합니다.

src/hello.ts

export const hello = () => {
  console.log("hello");
};

 

그런 다음, index.ts 를 다음과 같이 수정합니다.

src/index.ts

import { hello } from "./hello";
console.log(hello);

 

참고로 타입스크립트에서는

이렇게 자바스크립트의 ES 모듈 시스템과 아주 유사하게

내보낼 때에는 export 를 사용하고 불러올 때에는 import 를 사용합니다.

 

tsc로 컴파일하고, 결과를 확인합니다.

src/hello.js

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.hello = void 0;
const hello = () => {
  console.log('hello');
};
exports.hello = hello;

결과를 확인하면 require 나 exports 등의

CommonJS 문법으로 코드가 변환된 것을 확인할 수 있습니다.

앞서 module 옵션을 CommonJS 로 설정해 두었기 때문입니다.

 

이번에는 module 옵션을 ESNext 로 설정합니다.

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext"
  },
  "include": ["src"]
}

tsc를 이용해 다시 컴파일하고 결과를 확인합니다.

export const hello = () => {
  console.log('hello');
};

결과를 확인해보면

변환된 자바스크립트 코드가 ES 모듈시스템을 사용하는 걸

확인할 수 있습니다.

 

---

outDir

다음으로 살펴 볼 옵션은

컴파일 결과 생성할 자바스크립트 코드의 위치를 결정하는

outDir 옵션입니다.

tsconfig.json 에 다음과 같이 설정합니다.

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist"
  },
  "include": ["src"]
}

tsc 를 이용해 컴파일하면

이제 컴파일 결과가 dist 폴더에 생성됩니다.

 

---

strict

다음으로 살펴 볼 옵션은

타입스크립트 컴파일러의 타입 검사 엄격함 수준을 정하는

strict 옵션입니다.

옵션을 설정하기 전에 hello.ts 를 다음과 같이 수정합니다.

src/hello.ts

export const hello = (message) => {
  console.log("hello " + message);
};

hello 함수가

매개변수 message 를 제공받도록

코드를 수정했습니다.

현재는 아무런 오류가 발생하지 않습니다.

 

다음과 같이 strict 옵션을  true 로 설정합니다.

tsconfig.json

{
  "compilerOptions": {
    ...
    "strict": true
  },
  "include": ["src"]
}

.그리고 hello.ts 를 살펴보면

다음과 같이 갑자기 빨간 줄이 뜨면서

오류가 있다고 알려줍니다.

strict 는 엄격한 타입 검사를 의미하는 옵션인데요.

이 옵션을 true 로 설정하면,

이제 코드를 아주 엄격하게 검사하게 됩니다.

 

타입스크립트에서는 특별히 매개변수의 타입은

프로그래머가 직접 지정하도록 권장하는데요.

구체적인 이유는 나중에 다루겠지만,

대략적으로 타입스크립트는 함수 매개변수의 타입을 자동 추론할 수 없기 때문에

타입을 프로그래머가 직접 지정하지 않을 경우,

엄격한 타입 검사 모드에서는 오류가 발생하게 됩니다.

이때 반대로

stric 를 끄면 엄격하지 않게 검사하기 때문에

오류가 사라지게 됩니다.

---

ModuleDetection 옵션

타입스크립트의 모든 파일은

기본적으로 전역 파일(모듈)로 취급됩니다.

따라서 다음과 같이

a.ts 와 b.ts 두 타입스크립트 파일을 만들고,

동일한 이름의 변수를 선언하면 오류가 발생하게 됩니다.

// a.ts

const a = 1; // ❌

// b.ts

const a = 1; // ❌

이럴 때에는

각 파일에 모듈 시스템 키워드(export, import) 를

최소 하나 이상 사용해

해당 파일을 전역 모듈이 아닌

로컬(독립) 모듈로 취급되도록 만들어야 하는데,

이를 자동화 하는 옵션이 바로

moduleDetection 옵션입니다.

 

다음과 같이 moduleDetection 옵션을

force 로 설정할 경우,

자동으로 모든 타입스크립트 파일이 로컬 모듈(독립 모듈)로 취급됩니다.

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "moduleDetection": "force"
  },
  "include": ["src"]
}

---

ts-node 옵션

마지막으로 살펴 볼 옵션은

ts-node 옵션입니다.

moduleDetection 옵션을 활성화하고,

타입스크립트 파일에서 모듈 시스텀을 사용하게 되면

ts-node 로 실행시 오류가 발생하게 됩니다.

 

이 때 다음과 같이

ts-node 의 옵션을 설정하면,

ts-node 로 타입스크립트 모듈을 실행할 수 있게 됩니다.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
		"moduleDetection": "force"
  },
	"ts-node": {
		"esm": true
	},
  "include": ["src"]
}