Today I Learned
Typescript는 결국 타입스크립트 컴파일러를 통해 Javascript로 변환된 다음 실행된다
: 브라우저, NodeJS의 특징은 JS 파일을 실행할 수 있다는 것이다. 그러나, 타입스크립트는 브라우저, NodeJS 양쪽 모두에서 실행될 수 없다. 따라서, 결국 타입스크립트를 써도 Javascript로 변환하는 과정이 필요한데, 이는 타입스크립트 컴파일러를 통해 이뤄진다. 이 타입스크립트 컴파일러의 힘(?), 스마트함(?)을 통해 본래 자바스크립트로는 구현할 수 없던 타입 체킹과 같은 기능을 타입스크립트를 통해 구현하고, 이를 JS로 컴파일 하도록 만들 수 있다.
** typescript compiler : .ts 파일을 자바스크립트로 '트랜스파일링'해주는 역할을 한다. 이 때, '컴파일러'라는 용어 자체는 보통 프로그래밍 언어 혹은 소스 코드를 바이트 코드로 변환하는 작업을 해주는 역할을 하는 것으로 쓰기 때문에 타입스크립트 컴파일러는 트랜스파일러가 적합할지 모른다(어쨌든 타입스크립트 컴파일러라고 불린다).
** 그래서
npm install -g typescript를 해서 typescript를 install 해도 결국 타입스크립트 컴파일러를 다운받는 결과가 된다.
** 참고로, 매번 타입스크립트 컴파일러 명령어인 tsc를 이용해서 컴파일 한 js 파일을 node로 실행하는 과정이 번거롭기 때문에
npm i -g ts-node명령어를 통해 ts-node(타입스크립트 코드를 ES5로 변환하고, 실행까지 동시에 해주는 프로그램)를 다운받고
ts-node test.ts이런식으로 실행해주면 모든 과정이 자동으로 이뤄져서 편리하다.
** 다시 위의 내용으로 돌아와서, 예를 들어
const button = document.querySelector("button");
const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")! as HTMLInputElement;
function add(num1: number, num2: number) {
return num1 + num2;
}
button.addEventListener("click", function () {
console.log(add(+input1.value, +input2.value));
});위와 같은 타입스크립트 확장자를 가진 파일을 만들고, 코드를 작성했다고 해보자. (이는 "5" + "5" = "55"가 될 수 있는 논리적 에러를 타입스크립트로 사전 방지하기 위한 타입스크립트 코드이다.)이 코드를
tsc typescript_file_name.ts명령어를 사용해서 컴파일해주면
var button = document.querySelector("button");
var input1 = document.getElementById("num1");
var input2 = document.getElementById("num2");
function add(num1, num2) {
return num1 + num2;
}
button.addEventListener("click", function () {
console.log(add(+input1.value, +input2.value));
});다음과 같이 타입스크립트가 없는 순수 자바스크립트 파일로 컴파일된다(타입스크립트가 적용됐는지 조차 알 수 없다 육안으로는). 또한 파일명도 js이다. 하지만 이를 실제로 html에 적용시켜보면 잘 실행이 되는 것을 알 수 있다.
Typescript vs Babel
- 타입스크립트는 전체 프로젝트를 한번에 컴파일하고, 바벨은 한 번에 하나의 파일만 컴파일하기 때문에
export enum LanguageCode { korean = "ko", english = "en", japanese = "ja", chinese = "zh", spanish = "es", } // 다른 파일에서 LanguageCode import if (something === LanguageCode.korean) { console.log("Korean") }위와 같은 코드는 에러가 난다.
- 바벨은 타입스크립트의 타입에 대해서 관심이 없다(?)
const age: number = "30";위와 같은 코드는 타입스크립트에서는 에러로 확인돼 컴파일되지 않지만, 바벨의 경우 오류나 경고없이 컴파일 된다.
: 결론적으로 보통 타입스크립트를 사용하고, 타입스크립트 컴파일러를 통해 트랜스파일링을 한 다음에 바벨을 통해 다시 한번 컴파일을 진행하지만 당연히 빌드 체인에 복잡성을 가져오게됨. 하지만, 이제 Babel7부터는 타입스크립트 구문 지원이 내장돼 출하되기 때문에(바벨은 타입스크립트 체킹을 하지 않고 바로 제거함) 굳이 두번의 과정을 거칠 필요가 없다. 컴파일 과정에서(런타임 이전) 타입 에러를 체킹해서 모두 해결을 했다는 전제로 타입스크립트 체킹을 그대로 제거하는 과정으로 진행되는 것이다.
