자바스크립트 : dynamic typing
타입스크립트 : static type-checking (정적 타입 체크)
자바스크립트
타입스크립트
타입스크립트는 실수를 처음 코드를 작성할 때부터 방지할 수 있게 도와준다.
tsc
, 타입스크립트 컴파일러// This is an industrial-grade general-purpose greeter function:
function greet(person, date) {
console.log(`Hello ${person}, today is ${date}!`);
}
greet("Brendan");
명시적인 타입
function greet(person: string, date: Date) {
console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
타입 추론
hello.ts
function greet(person: string, date: Date) {
console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", new Date());
hello.js
function greet(person, date) {
console.log("Hello " + person + ", today is " + date.toDateString() + "!");
}
greet("Maddison", new Date());
hello.ts를 컴파일한 결과 ts와 js 파일은 두 가지 차이점 생긴다.
1. person과 date 파라미터에 타입 표시가 사라졌다.
2. template string이 +
로 덧붙여진 plain string으로 변환되었다.
1번 처럼 타입 표시가 사라진 이유는 브라우저나 런타임은 타입스크립트를 실행시킬 수 없기 때문이다.
따라서, 타입스크립트는 컴파일러가 먼저 실행이 되어서, Typescript-specific 코드를 없애거나 변환시켜야 한다.
위의 예시에서 2번과 같이 컴파일러가 template string을 +
로 스트링들이 덧붙여진 형태로 변환한 이유는 무엇일까?
Downleveling
template string은 ECMAScript 2015 (ES6)의 문법이다.
타입스크립트는 ECMAScript의 높은 버전에서 하위 버전으로 코드를 재작성시킬 수 있다. 이를 downleveling
이라고 한다.
디폴트로 타입스크립트의 target은 ES3이다. 만약 타겟을 ES6로 변경시킨다면, template string은 변환되지 않게 된다.
tsc --target es6 hello.ts
function greet(person, date) {
console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", new Date());