컴파일

결국 타입스크립트는 자바스크립트로 컴파일 된다. 코드의 최종 실행은 결국 자바스크립트가 실행된다고 생각하자. 아래 예시를 보자

1
let movieTitle: string = "Amadeus";
2
movieTitle = "Arriaval";
3
movieTitle = 9; // 'number' 형식은 'string' 형식에 할당할 수 없습니다.ts(2322)
4
movieTitle.upper(); // 'string' 형식에 'upper' 속성이 없습니다.ts(2339)
5
movieTitle.toUperCase(); //'toUperCase' 속성이 'string' 형식에 없습니다. 'toUpperCase'을(를) 사용하시겠습니까?ts(2551)
6
movieTitlee.toUpperCase();
7

8
let numCatLives: number = 9;
9
numCatLives += 1;
10
numCatLives = "zero"; // 'string' 형식은 'number' 형식에 할당할 수 없습니다.ts(2322)
11

12
let numGameLives: number = 2.5;
13
numGameLives = 2;
14
numGameLives = 3.5;
15

16
let gameOver: boolean = false;
17
gameOver = true;
18
gameOver = "false"; // 'string' 형식은 'boolean' 형식에 할당할 수 없습니다.ts(2322)

위 코드를 tsc basics.ts 명령어를 통해 컴파일 해보자

1
basics.ts:3:1 - error TS2322: Type 'number' is not assignable to type 'string'.
2

3
3 movieTitle = 9; //
4
  ~~~~~~~~~~
5

6
basics.ts:4:12 - error TS2339: Property 'upper' does not exist on type 'string'.
7

8
4 movieTitle.upper();
9
             ~~~~~
10

11
basics.ts:6:12 - error TS2551: Property 'toUpperCas' does not exist on type 'string'. Did you mean 'toUpperCase'?
12

13
6 movieTitle.toUpperCas();
14
             ~~~~~~~~~~
15

16
  ../../../../../usr/local/lib/node_modules/typescript/lib/lib.es5.d.ts:508:5
17
    508     toUpperCase(): string;
18
            ~~~~~~~~~~~~~~~~~~~~~~
19
    'toUpperCase' is declared here.
20

21
basics.ts:10:1 - error TS2322: Type 'string' is not assignable to type 'number'.
22

23
10 numCatLives = "zero";
24
   ~~~~~~~~~~~
25

26
basics.ts:18:1 - error TS2322: Type 'string' is not assignable to type 'boolean'.
27

28
18 gameOver = "false";
29
   ~~~~~~~~
30

31

32
Found 5 errors in the same file, starting at: basics.ts:3

그럼 위와 같은 에러가 뜰 것이다. 하지만 문제 없이 자바스크립트 파일은 컴파일 되었다. 해당 파일을 보자.

1
var movieTitle = "Amadeus";
2
movieTitle = "Arriaval";
3
movieTitle = 9;
4
movieTitle.upper();
5
movieTitle.toUpperCase();
6
movieTitle.toUpperCas();
7
var numCatLives = 9;
8
numCatLives += 1;
9
numCatLives = "zero";
10
var numGameLives = 2.5;
11
numGameLives = 2;
12
numGameLives = 3.5;
13
var gameOver = false;
14
gameOver = true;
15
gameOver = "false";

일단 모든 타입 애너테이션이 사라졌고 let이 var로 바뀌어져 있다. 이로 인해 알 수 있는건 첫 째, 타입스크립트는 결국 자바스크립트 코드로 컴파일 되고, 둘 째로 설정에 따라 컴파일에 사용될 자바스크립트 버전을 선택할 수 있다는 것이다.