타입스크립트 | 컴파일러 옵션 설정하기

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

얼마나 엄격하게 타입 오류를 검사할지? 자바스크립트 코드의 버전은 어떻게 할지?
원하는대로 타입스크립트의 컴파일러 설정을 바꿔보자!

 

※ 컴파일러 옵션은 노드js 패키지 단위로 설정 가능하다. 즉, 프로젝트마다 설정할 수 있다는 것!

---

타입스크립트 파일 컴파일 방법

tsc 경로/파일명.ts

• 해당 파일을 컴파일 하여 자바스크립트 파일을 생성
• 이후 node 명령어로 생성된 자바스크립트 파일 한 번 더 실행해야 함.

ts-node 경로/파일명.ts

• 자바스크립트 파일을 생성하지 않고 타입스크립트 파일을 바로 컴파일 하여 실행
• 바로 사용하면 에러가 발생할 수 있음 => 아래 컴파일러 옵션 ts-node 참고하여 컴파일러 설정값 추가

---

컴파일러 옵션 설정하기

1. congig 파일 생성

터미널에 tsc --init 입력하면 컴파일러 설정 파일인 tsconfig.json이 생성된다.

 

여기서 다양한 옵션들 확인이 가능하지만,
본 포스팅에서는 전부 다 지우고 새로 입력해주었다.

 

2. 옵션

(1) include

tsc가 컴파일 할 ts 파일들의 범위와 위치를 지정한다.

 

특정 위치 안에 있는 모든 ts 파일들을 컴파일 할 수 있다.

 

ex. 컴파일 대상 : src 폴더 안의 모든 ts 파일

{
  "include": ["src"]
}

이렇게 지정해주면 터미널에 tsc 명령어만 입력해도 src 폴더 안의 모든 ts 파일들이 컴파일 된다.

 

(2) target

컴파일 시 만들어지는 자바스크립트의 버전을 설정한다.

 

[참고] 타입스크립트를 자바스크립트로 변환하는 과정이나 타입 검사 등의 상세 옵션을 설정할 때는 compilerOptions 안에 옵션을 정의한다.

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

이렇게 지정해주면 컴파일 후 ESNext 버전의 자바스크립트 파일이 생성된다. ESNext는 가장 최신 버전을 의미한다.

 

(3) module

변환되는 자바스크립트의 모듈 시스템을 설정한다.

 

자바스크립트의 대표적인 모듈 시스템

• CommonJS (구버전)
• ES

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

 

(4) outDir

컴파일 결과 생성될 자바스크립트 코드의 위치를 지정한다.

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

위 설정대로라면 컴파일된 자바스크립트 파일들은 dist 폴더 안에 생성된다.(dist 폴더가 존재하지 않으면 생성해줌)

 

(5) strict

타입스크립트 컴파일러가 얼마나 엄격하게 타입을 검사할 것인지 지정한다.

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

 

true : 엄격한 타입검사
false : 유연한 타입검사

 

(6) moduleDetection

동일한 이름의 변수를, 똑같은 스코프에 두 번 이상 선언할 수 있을까?

자바스크립트 파일은 하나의 모듈로 간주되기 때문에 가능하다.

 

그러나 ts 파일은 기본적으로 이런 선언이 허용되지 않는다.

ts 파일은 전역 모듈(global module)로 간주되기 때문에 각기 다른 ts 파일 안의 중복된 이름의 변수는 같은 전역 공간에 있다고 판단한다.

 

 

이를 해결하는 방법 2가지가 있다.

1. export, import와 같은 모듈 시스템의 키워드를 한 번 이상 사용하면 독립된 모듈로 간주됨
2. moduleDetection 옵션 "force" 사용

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

컴파일 후 생성되는 자바스크립트 파일 안에는,
tsconfig.json의 module 옵션의 값에 맞춰 export나 import 키워드가 자동으로 추가된다.

 

(7) ts-node

ts-node 명령어 사용할 때 tsconfig.json의 module 옵션값이 ESNect 모듈로 지정되었다면 오류가 발생 할 것이다.

 

그 원인은 보통

1. package.json 파일 안에서 "type":"module" 을 추가 안해서
2. ts 파일 자체를 ts-node가 이해하지 못해서

ts-node는 기본적으로 CommonJs 모듈 시스템으로 동작한다. 따라서 ESNext 모듈 시스템으로도 동작할 수 있도록 아래와 같이 ts-node 옵션값을 추가해야 한다.

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

---

 

본 포스팅은 인프런 한 입 크기로 잘라먹는 타입스크립트 강의를 기반으로 작성되었습니다. 사용된 이미지들은 모두 위 강의에서 가져왔습니다. 문제시 알려주세요.