[TypeScirpt] 타입스크립트 컴파일러 옵션 설정

0. 타입스크립트 컴파일러 옵션이란?

컴파일러 옵션으로 "얼마나 엄격하게 타입 오류를 검사할지", "자바스크립트 코드의 버전은 어떻게 할지" 등 다양하고 자유롭게 컴파일러 옵션을 설정할 수 있다.

 

타입스크립트 컴파일러 옵션  프로젝트에 맞게 컴파일러 옵션을 설정도 가능하다!

• 컴파일러 설정 파일 만들기

tsc --init

 

 

1. include

include옵션은 어느 범위를 컴파일 할 것인지를 정하는 옵션이다.
src파일 하위에 있는 모든 코드를 컴파일 하고 싶으면, 아래와 같이 작성할 수 있다.

{
  "include": ["src"],  //컴파일 할 typescipt 파일들의 범위와 위치를 알려주는 옵션
}

 

 

 

 

2. compilerOptions

{
  "include": ["src"],  //컴파일 할 typescipt 파일들의 범위와 위치를 알려주는 옵션
  "compilerOptions": {
    "target": "ES5"
  },//javascript 코드의 버전을 설정하는 옵션

}

 

 

compilerOptions의 target을 ES5으로 한경우

//index.ts
var func = () => {
  return console.log('hello');
};

 

 

//index.js
var func = function () {
    return console.log('hello');
};

 

tsc로 컴파일 한 경우 ES5버전에는 화살표 함수가 없기 때문에 화살표 함수가 없는 일반 함수로 변경된 것을 볼 수 있다.

 

 

화살표 함수가 있는 ESNext( 자바스크립트 최신 버전)버전으로 변경하게 되면,

var func = () => {
    return console.log('hello');
};

정상적으로 화살표 함수로 변환된 것을 볼 수 있다.

 

 

 

• undici-types 오류가발생 한다면, 다음 포스팅을 참고하길 바란다.

[TypeScript] TS Cannot find module 'undici-types' 오류

 

3. module

자바스크립트의 모듈 시스템에는 대표적으로 CommonJS, CJS와 ES모듈시스템, ESM 모듈시스템이 존재한다.

 

Common JS는

const math = require('./math.js') 
console.log(math.sum(1, 2))

const { PI } = Math exports.sum = (a, b) => a + b exports.circumference = (r) => 2 * PI * r

위코드와 같이 moduel코드를 불러오고 내보내고,

 

 

Esm의 경우

import math from "math.js"
export const math = (a, b) => a + b exports.circumference = (r) => 2 * PI * r

위처럼 moduel를 불러온다.

 

코드를 불러오는 방식이 다르기 때문에, ts컴파일에서 moduel을 불러오고 내보내는 방식을 지정해주어야 한다.

 

 

{
  "include": ["src"], //컴파일 할 typescipt 파일들의 범위와 위치를 알려주는 옵션
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "ESNext",
    "module": "CommonJS" //moduel을 불러오는 방법을 지정.
  } //javascript 코드의 버전을 설정하는 옵션
}

//index.ts
import { hello } from "./hello";
hello();

//hello.ts
export const hello = () => console.log('hello');

tsconfig.json과 각 파일을 위처럼 작성한 후 tsc로 컴파일 하게 되면,

 

 

//index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const hello_1 = require("./hello");
(0, hello_1.hello)();

 

index.js파일이 CommonJs 방식으로 변경된 코드로 작성 된 것을 볼 수 있다!

 

 

module을 ESNext로 변경하게 되면,

{
  "include": ["src"], //컴파일 할 typescipt 파일들의 범위와 위치를 알려주는 옵션
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "ESNext",
    "module": "ESNext" //moduel을 불러오는 방법을 지정.
  } //javascript 코드의 버전을 설정하는 옵션
}

 

//index.js
import { hello } from './hello';
hello();

//hello.js
export const hello = () => console.log('hello');

아까와 달리 ESM 모듈 시스템으로 변경된 것으로 볼 수 있다.

 

 

 

위의 상황처럼 module옵션은 프로젝트별로 다르게 설정할 수 있다는 사실을 알 수 있다.

 

 

 

 

4. outDir

{
  "include": ["src"], //컴파일 할 typescipt 파일들의 범위와 위치를 알려주는 옵션
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "ESNext",
    "module": "ESNext", //moduel을 불러오는 방법을 지정.
    "outDir": "dist" //컴파일 결과 js 파일이 생성되는 위치
  } //javascript 코드의 버전을 설정하는 옵션
}

 

outDir옵션을 통해 컴파일 후 생성되는 js파일의 위치를 변경할 수 있다. 위 코드처럼 dist라고 하면, 루트폴터 밑에 /distf로 생기게 된다.

 

 

 

 

5. strict

 

export const hello = (message) => console.log('hello' + message);

 

위와 같은 파일이 존재한다고 할 때, 그냥 매개변수를 받아서 출력하는 것이기 때문에 오류가 발생하지 않는다.

 

 

하지만 tsconfig.json에서 strict설정을 true로 한다면, 매개변수의 타입을 알 수 없기 때문에 오류가 발생하게 된다. strict 즉 엄격한 검사를 하게 된다면, 추론할 수 없는 타입의 경우 타입오류가 발생하게 된다.

 

 

보통의 처음 개발하는 Ts프로젝트의 경우 strict를 true로 설정하여 작업하지만, 거대한 JS 프로젝트를 TS프로젝트로 변경하게 되는 경우, 오류가 걷잡을 수 없게 발생하기 때문에 이런경우에는 strict를 false로 하는 경우 들이 존재한다.

 

 

6. moduleDetection

 

//index.ts
const a = 1;

//hello.ts
const a = 1;

 

위처럼 다른 파일에 같은 변수를 선언하게 되더라도, TS는 같은 스코프 안에 같은 변수가 존재한다고 판단하게 된다. JS의 경우 파일 별로 모듈로 구분되지만, TS의 경우 모든 파일이 같은 스코프 안에 있다고 판단하게된다.

 

-> 모든 TS 파일은 글로벌 모듈( 전역 모듈)로 취급받는다!

 

 

 

 

해결방법 1

import 또는 export와 같이 모듈 키워드가 파일 안에 존재한다면, 독립된 파일로 보기 때문에,

const a = 1;
export {};

 

모든 파일에 export를 넣어두는 방법이 있다.

 

 

해결방법 2

 

{
  "include": ["src"], //컴파일 할 typescipt 파일들의 범위와 위치를 알려주는 옵션
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "ESNext",
    "module": "ESNext", //moduel을 불러오는 방법을 지정.
    "outDir": "dist", //컴파일 결과 js 파일이 생성되는 위치
    "strict": false,
    "moduleDetection": "force"
  } //javascript 코드의 버전을 설정하는 옵션
}

 

moduleDetection 옵션을 force로 설정하게 된다면 위처럼 모듈 키워드가 존재하지 않아도, TS에서 각 파일은 독립된 모듈과 같이 판단하게 된다.

 

 

tsc로 컴파일을 하여 생긴 JS파일은

const a = 1;
export {};

 

위와 같이 export {}; 가 생성되게 되어, 해결할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

- 이 포스팅은 '이정환 - 한 입 크기로 잘라먹는 타입스크립트 (인프런)' 강의를 참고하여 작성되었습니다.

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런