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

🌵@types/node 설치하기

@types/node 패키지란?

Node.js 내장 기능들의 타입 정보를 담고 있는 패키지

> npm i @types/node

📌 @types/node 패키지를 설치해야 하는 이유?

@types/node 라이브러리는 Node.js가 제공하는 기본 기능(내장 함수, 클래스 등)에 대한 타입 정보를 가지고 있다.

때문에 설치하지 않으면 Node.js가 제공하는 console 등의 기본 기능들의 타입이 선언되지 않는다.

타입스크립트 코드를 실행하기 전에 타입 검사 과정을 거치는데, 이 과정에서 타입이 선언되지 않은 코드는 타입이 올바르게 사용되지 않았다고 판단되어 오류가 발생한다.

따라서 Node.js의 기본 기능들을 위한 타입을 별도로 선언하기 위해 @types/node 패키지를 설치해야 한다.

 

---

🌵 타입스크립트 컴파일러 설치하기

전역에 사용할 수 있게 -g 옵션을 붙여 설치한다.

// Windows의 경우
> npm i -g typescript

// macOS의 경우
> sudo npm i -g typescript

 

📌 타입스크립트 컴파일러를 설치하는 이유?

타입스크립트는 컴파일러에 의해 자바스크립트로 변환한 다음에 실행이 된다.

따라서 자바스크립트를 실행하기 위해 Node.js를 설치하는 것처럼 타입스크립트를 컴파일 하기 위해 타입스크립트 패키지를 설치해야 한다.

설치 후 타입스크립트 컴파일러의 버전을 확인하려면 다음 명령어를 입력한다.

// 타입스크립트 컴파일러 명령어 -> tsc
> tsc -v

 

---

🌵 타입스크립트 실행하기

타입스크립트 코드를 컴파일하기 위해서는 tsc 명령어를 사용한다.

타입스크립트 파일을 생성한 다음 내용을 작성한다.

// src/index.ts
console.log("Hello TypeScript");
// 변수 a는 number타입이고 1을 할당받음
const a: number = 1;

index.ts파일을 컴파일 하기 위해 명령어를 입력한다.

// 파일의 경로를 입력
> tsc src/index.ts

컴파일이 완료되면 index.js파일이 생성되고 타입 관련 코드는 지워진 상태이다.

 

컴파일된 index.js파일을 실행하려면 다음과 같은 명령어를 입력한다.

> node src/index.js

이처럼 타입스크립트 코드를 실행하기 위해 2번의 명령어를 사용하는건 조금은 번거로운 방법이다.

하지만 ts-node를 사용하면 한 번의 명령어로 타입스크립트 코드를 바로 실행할 수 있다.

 

⚡️ ts-node로 실행하기

한 번에 타입스크립트 코드를 컴파일부터 실행까지 시키는 도구로 타입스크립트 컴파일러와 node.js가 같이 있다.

 

ts-node또한 전역으로 설치한다.

// Windows일 경우
> npm i -g ts-node

// macOS일 경우
> sudo npm i -g ts-node

 

설치 후 ts-node 명령어로 파일을 실행한다.

> ts-node src/index.ts

 

 

---

🌵 컴파일러 옵션 설정하기

컴파일러 옵션을 설정한다 = 프로그래머가 자신에게 맞게 설정을 자유롭게 변경한다

📌 컴파일러 옵션이란?

- 얼마나 엄격하게 타입 오류를 검사할 것인가

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

등의 컴파일의 아주 세부적인 사항들이다.

타입스크립트는 다른 언어에 비해 컴파일러 옵션을 아주 자유롭고 쉽게 설정할 수 있어 진행하는 프로젝트의 성격에 따라 프로젝트에 최적화된 맞춤 설정을 만들어 사용할 수 있다.

 

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

타입스크립트의 컴파일러 옵션은 패키지 루트 폴더 아래에 tsconfig.json 이라는 파일에 설정하며 Node.js 패키지 단위로 설정한다.

tsconfig.json 파일을 생성한다.

> tsc --init

명령어를 입력하고 나면

ㅗㅜㅑ,,,

주석이 가득한 파일이 생성된다.

주석으로 된 옵션을 해제하면 tsc동작이 바뀌게 되는데 컴파일러 옵션에 대해 처음부터 알아보기 위해 다 지우고 시작한다.

// tsconfig.json
{}

 

🌱 컴파일러 옵션 알아보기

1. include 옵션

컴파일 할 타입 스크립트 파일의 범위와 위치를 알려주는 옵션
⇒ 너 여기 안에 있는 파일을 컴파일 할 거야!

컴파일 할 파일이 들어있는 폴더를 [ ]안에 넣어준다.

{
  "include": ["src"] // src폴더 아래의 모든 ts파일을 컴파일
}

설정 후 tsc명령어를 입력하면 src폴더 아래의 모든 타입스크립트 파일이 동시에 컴파일된다.

> tsc

---

2. target 옵션

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

compilerOptions 안에 자바스크립트 코드의 버전을 작성한다.

{
  "compilerOptions": {
    "target": "ES5" // ES5 버전의 자바스크립트 코드로 변환
  },
  "include": ["src"]
}

설정 후 index.ts파일에 화살표 함수를 작성한 후 컴파일하면 함수표현식으로 변환된 것을 확인할 수 있다.

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

 

이번엔 자바스크립트 최신 버전으로 설정한 후 다시 컴파일해보면 index.js 또한 화살표함수로 변환된다.

"target": "ESNext"

➡️ target 옵션을 이용하면 생성되는 자바스크립트 코드의 버전을 마음대로 조정할 수 있다.

 

---

3. module 옵션

변환되는 자바스크립트 코드의 모듈 시스템을 설정하는 옵션

compilerOptions 안에 설정할 모듈 시스템을 추가한다.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext" // 옛날 모듈 옵션으로 설정할 시 "CommonJS"
  },
  "include": ["src"]
}

가장 최신의 모듈 시스템으로 설정한 후 파일을 컴파일하면 ES모듈 시스템을 사용하는 자바스크립트 코드로 변환된다.

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

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

 

---

4. outDir 옵션

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

compilerOptions 안에 생성되는 자바스크립트 파일이 들어갈 위치(혹은 폴더명)을 추가한다.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist" // dist폴더에 컴파일 결과가 위치함
  },
  "include": ["src"]
}

설정 후 컴파일을 하면 자바스크립트 파일이 들어간 dist폴더가 생성된다.

➡️ 컴파일 결과로 생성되는 코드를 우리가 작성하는 코드 영역에서 분리할 수 있다.

 

---

5. strict 옵션

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

compilerOptions 안에 strict 옵션을 엄격하게 할지 유연하게 할지를 설정한다.

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

타입 검사를 엄격하게 설정한 후 코드를 다음과 같이 수정한다.

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

현재는 오류가 없는 코드이지만 옵션을 설정한 후에는 빨같 밑줄이 쳐진다.

 

타입스크립트에서는 특별히 매개 변수의 타입은 프로그래머가 직접 지정하도록 권장한다.

이는 타입스크립트가 함수의 매개 변수 타입을 자동으로 추론할 수 없기 때문이며 타입을 직접 지정하지 않을 경우 엄격한 타입 검사 모드에서 오류가 발생한다.

 

stirct 옵션을 false로 설정하면 유연하게 타입을 검사해 오류가 사라지지만 엄격하게 검사해야 오류 가능성을 줄일 수 있으므로 true로 설정하는 것이 좋다.

단, 자바스크립트 코드로 짜여진 프로젝트를 타입스크립트로 새로 마이그레이션하는 경우는 예외이다.

갑작스럽게 strict옵션을 엄격하게 설정하면 기존의 자바스크립트 코드에 모두 빨간 밑줄이 뜨게되는 대참사가 일어날 수 있다. 따라서 이때는 strict옵션을 끄기도 한다.

 

---

6. ModuleDetection 옵션

각 파일에 모듈 시스템 키워드(export, import)를 최소 하나 이상 사용해 해당 파일을 로컬(독립) 모듈로 취급되도록 자동화 하는 옵션

타입스크립트의 모든 파일은 기본적으로 전역 파일(모듈)로 취급된다. 따라서 각자 다른 타입스크립트 파일에서 동일한 이름의 변수를 선언하면 오류가 발생한다.

// a.ts

const a = 1; // ❌

// b.ts

const a = 1; // ❌

때문에 각 파일을 전역 모듈이 아닌 로컬 모듈로 취급되도록 만들어야한다.

 

moduleDection 옵션을 force로 설정하면 자동으로 모든 타입스크립트 파일이 로컬 모듈로 취급된다.

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

만약, 설정 후에도 오류로 인식한다면 현재 작성한 tsconfig.json 을 기준으로 타입 검사를 다시 수행하도록 해야한다.

1. command + shift + p 혹은 control + shift + p 를 누른다
2. restart를 검색창에 입력 후 TS 서버 다시 시작 클릭

컴파일 후 js파일을 보면 자동으로 export가 추가되어있다.

// index.js
const a = 1;
export {}; // 자동으로 export가 추가되어있다.

// hello.js
const a = 1;
export {};

타입스크립트가 컴파일되면서 모듈 시스템을 사용하는 키워드를 자동으로 추가되어 모든 파일이 로컬 모듈로써 개별 취급을 받는다.

 

---

7. ts-node 옵션

moduleDetection 옵션을 활성화 하고 타입스크립트 파일에서 모듈 시스템을 사용하게 되면 ts-node로 실행시 오류가 발생하게 된다.

> ts-node src/index.ts

node에서 오류가 발생했다는 에러 메세지가 뜬다.

에러 메세지를 보면 ES 모듈에서 로드하려면 "type": "module”을 package.json파일에 정의를 해야한다. 라는 해결방안을 제시하고 있으며 이를 package.json에 추가를 한다.

 

하지만 다시 컴파일을 하면 다른 에러 메세지가 뜬다.

이는 ts파일을 읽을 수 없다는 메세지로 ts 노드가 ES 모듈 시스템을 해석하지 못하기 때문에 발생한다. (ts 노드는 기본적으로 CommonJS를 사용함)

 

따라서 ts노드를 위한 옵션을 추가한다.

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

 

---

(추가 옵션)

8. moduleResolution 옵션

컴파일러가 각 import가 어떤 모듈을 가리키는지 해석할 때 사용할 탐색 전략을 설정하는 옵션

강의를 따라하는데 나만 나타나는 에러,,

컴파일을 할 때 에러 메세지가 나타났다.

에러 메세지를 보니 moduleResolution 옵션을 nodenext로 설정을 안했기 때문이였다.

 

moduleResolution은 모듈 해석 전략으로 크게 classic과 node로 나누어진다. 이 옵션을 지정하지 않는다면 module 플래그가 CommonJS인 경우에는 Node로, 그렇지 않은 경우에는 Classic으로 자동 지정된다.

따라서 현재 모듈은 ESNext로 설정되어있기 때문에 Classic으로 자동 지정이 되었다.

이를 nodenext로 설정해준다.

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

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트 - 인프런 | 강의