TypeScript : 컴파일 방법, 예제, 개념

TypeScript을 사용하는 핵심은 JavaScript로 컴파일링하는 것입니다. 끝에는 JavaScript로 컴파일링해야 합니다. 터미널에서 파일 위치 디렉터리만 지정하시면 됩니다. 터미널에서 하는 게 익숙하지 않으시면 간단하게 VS Code의 파일명에 마우스 오른쪽 버튼을 누르고 Open in Integrated Terminal을 클릭하시면 됩니다. 그리고 tsc와 .ts로 끝나는 파일명을 입력합니다.

 

// String Variable With Explicit Annotation
let movieTitle: string = "Amadeus";
movieTitle = "Arrival";
movieTitle = 9; //This results in an error!
movieTitle.toUpperCase();

// Number Variable with explicit annotation
let numCatLives: number = 9;
numCatLives += 1;
numCatLives = "zero"; //Error!

// Explicitly typed boolean variable:
let gameOver: boolean = false;
gameOver = true;
gameOver = "true"; //error!!

 

Enter를 누르자마자 두 가지 일이 발생합니다. 우선 새로운 파일 variables.js가 생성되는데 열도록 합니다. 또 터미널 자체에서 피드백을 주는데 오류가 두 개가 발생합니다. 세 번째 줄에 '숫자 타입은 문자열 타입에 할당할 수 없다'라고 나옵니다.

movieTitle 줄에 해당합니다. Amadeus 문자열이 들어가 있는 movieTitle을 숫자 9로 바꾸려고 해서 그렇습니다. TypeScript이 터미널을 통해 이 오류를 놓쳤음을 알려줍니다. 그리고 아래 12번 줄에도 같은 유형의 오류가 있다고 알려줍니다.

"true"라는 문자열이 아닌 불리언이 들어가야 합니다. 이런 오류들이 있음에도 TypeScript이 .js 파일로 컴파일이 되었습니다. 컴파일링된 variables.js 파일을 보면 차이가 몇 개 있습니다.

우선 let 대신에 var이 들어갔는데 이건 컴파일링 대상 설정에 따른 것입니다. 어떤 JavaScript 버전을 원하는지에 따라 바꿀 수 있습니다. 예를 들어 ES20 버전에 맞게 컴파일링할 수 있습니다.

 

 

TypeScript : 컴파일링 방법, 예제, 개념

 

지금은 var을 사용하는 기본 설정으로 되어있는데 이대로 좋습니다. 또 다른 차이는 모든 애너테이션이 사라졌다는 겁니다. 애너테이션은 TypeScript에 한정된 구문이 JavaScript로 컴파일링되면서 빠진 것입니다. 다시 말해, TypeScript은 작성자의 실수나 오류를 알려주긴 하지만 오류가 있어도 .js로 컴파일링하는 걸 중지시키거나 하지는 않습니다. 대신에 코드를 작성하는 내내 편집기에서 오류를 계속 알려줍니다.

'여기는 숫자가 아닌 문자가 들어가야 해'라고 말해주는 것입니다. 그리고 작성한 TypeScript 코드를 컴파일링할 때는 터미널을 통해 어디에 어떤 문제가 있는지 명확하게 알려줍니다. JavaScript 코드로 컴파일링을 하면 TypeScript에만 있는 구문들은 사라지고 일반 JavaScript 평문으로 바뀌고 이를 원하는 Node나 브라우저에서 실행해서 잘 동작되는 게 TypeScript의 목적입니다.

이렇게 강의 초반에 워크플로우의 큰 그림을 보는 게 도움이 될 거라 생각합니다. TypeScript에서 오류와 피드백을 받고 작성한 코드를 컴파일링하면 다시금 놓치거나 무시한 오류에 관한 메시지를 받고 결과적으로 JavaScript 코드를 얻게 됩니다. 작업 중에 조정 가능한 옵션이 다양한데 섹션을 진행하면서 같이 보도록 하고 지금은 tsc 명령어와 TypeScript을 컴파일하면 같은 이름으로 .js 파일이 생성된다는 것을 기억해야 합니다.