타입스크립트 컴파일러 (tsc)

타입스크립트 컴파일러(tsc)는 타입스크립트 코드를 검사하여 타입 오류를 확인하고 자바스크립트 코드로 변환해주는 도구입니다.

tsc는 typescript npm 패키지에 포함되어 있으며, 자바스크립트로 작성된 도구이기에 node.js나 브라우저에서 사용 할 수 있습니다.

tsc 가볍게 사용해보기

이제 실제로 typescript 패키지를 깔고 tsc로 타입스크립트 코드를 자바스크립트 코드로 컴파일 해봅시다.

실습을 위해 빈 디렉토리를 만들고, 터미널에서 해당 디렉토리로 이동합니다.
Terminal window
```
mkdir tsc-test
cd tsc-test
```
패키지 매니저로 typescript를 설치합니다.
Terminal window
```
npm install typescript
```
실습용 ts 파일을 만듭니다.
utils.ts
```
function add(a: number, b: number): number {
  return a + b;
}
```
add 함수의 첫번째 줄에 있는 3개의 : number가 보이시나요? 이게 바로 자바스크립트는 이해할 수 없는 타입스크립트 문법입니다.

이 : number는 각각 add 함수의 파라미터 a, b, 그리고 반환값의 타입을 지정한 것으로, 이로 인해 add 함수는 두 개의 숫자를 받아 숫자를 반환하는 함수로 정의됩니다.
tsc 명령어로 utils.ts 파일을 utils.js 파일로 컴파일합니다.
Terminal window
```
npx tsc utils.ts
```
컴파일된 utils.js 파일을 확인합니다.
utils.js
```
function add(a, b) {
  return a + b;
}
```

tsc를 통해 타입스크립트 코드가 자바스크립트 코드로 컴파일 됐고, 이 과정에서 자바스크립트는 이해할 수 없는 타입스크립트 문법이 제거되었습니다.

function add(a: number, b: number): number {
function add(a, b) {
  return a + b;
}

tsc는 단순히 타입스크립트 코드를 자바스크립트로 바꿔주는 것이 아니라, 타입 오류도 검사합니다.

이제 타입 오류를 발생시켜보겠습니다.

앞 단계에서 만들어진 utils.js를 삭제합니다.
Terminal window
```
rm utils.js
```
utils.ts 파일을 수정합니다.

add 함수를 호출 할 때 두번째 인자에 문자열을 넣었습니다. 이는 타입적으로 허용되지 않는 작업입니다.
utils.ts
```
function add(a: number, b: number): number {
  return a + b;
}

add(1, "2");
```
tsc 명령어로 utils.ts 파일을 utils.js 파일로 컴파일합니다.
Terminal window
```
npx tsc utils.ts
```

컴파일 에러를 확인합니다.

number 타입 파라미터에 인수로 string을 넣었기 때문에 타입 오류가 발생했습니다.

utils.ts:5:8 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

5 add(1, "2");
         ~~~


Found 1 error in utils.ts:5

이처럼 tsc는 타입스크립트 코드의 타입 오류를 검사하면서 자바스크립트 코드로 변환해줍니다.

tsconfig.json

tsc는 tsconfig.json 파일을 통해 컴파일 옵션을 설정할 수 있습니다.

tsconfig.json에 대한 내용은 다음 회차에서 다루겠습니다.