1. The Basics
Static type-checking
자바스크립트 : dynamic typing
- 자바스크립트는 런타임에 발생하는 에러에 대해서 미리 알지 못한다.
타입스크립트 : static type-checking (정적 타입 체크)
- 타입스크립트는 프로그램이 실행되기 전에 타입이 올바른지를 확인해준다.
- 정적 타입 시스템은 프로그램이 실행될 때, value의 모양과 행동이 어떠한지를 설명해준다.
- 타입스크립트는 해당 정보를 사용하여, 이 프로그램 실행 결과 어떤 에러가 발생하는지를 말해줄 수 있다.
Non-exception Failures
자바스크립트
- 자바스크립트는 런타임 에러를 던질 수 있다.
- 예를 들어, callable하지 않는 string을 호출할 경우에 에러를 던진다.
- 런타임에도 에러를 던지지 않는 경우가 있다.
- 예를 들어 객체에서 존재하지 않는 프로퍼티에 접근하면 에러를 던지지 않고 undefined를 반환한다.
타입스크립트
- 정적 타입 시스템에서는 자바스크립트에서는 valid하기에 바로 에러를 던지지 않는 코드에 대해서도, 에러라고 말해준다.
- 오타, 호출되지 않는 함수, 단순한 로직 에러에서도 에러를 던진다.
Types for Tooling
타입스크립트는 실수를 처음 코드를 작성할 때부터 방지할 수 있게 도와준다.
- 타입스크립트는 프로퍼티를 제안해줄 수 있다.
- 코드를 작성하는 중에도 에러 메시지를 보여주거나, 코드 자동완성을 해줄 수 있다.
- 타입스크립트를 지원하는 에디터에서는 자동으로 에러를 고쳐주거나, 리팩토링해주거나, 변수의 정의로 이동하게 해주거나, 변수의 모든 reference를 찾게해주는 등의 기능을 제공한다.
tsc, 타입스크립트 컴파일러
- tsc는 타입스크립트 파일을 자바스크립트 파일로 컴파일시킨다.
- tsc는 컴파일 과정에서 에러를 커맨드라인으로 보여준다.
// This is an industrial-grade general-purpose greeter function:
function greet(person, date) {
console.log(`Hello ${person}, today is ${date}!`);
}
greet("Brendan");
Explicit Types
명시적인 타입
- 타입을 명시적으로 작성할 수 있다.
function greet(person: string, date: Date) {
console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}타입 추론
- 명시적인 타입이 없다면, 타입스크립트는 타입을 추론한다.
- 타입스크립트가 같은 타입을 추론하게 된다면, 타입을 명시하지 않는 것이 좋다.
Erased Types
-
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 코드를 없애거나 변환시켜야 한다.
Downleveling
위의 예시에서 2번과 같이 컴파일러가 template string을 +로 스트링들이 덧붙여진 형태로 변환한 이유는 무엇일까?
Downleveling
template string은 ECMAScript 2015 (ES6)의 문법이다.
타입스크립트는 ECMAScript의 높은 버전에서 하위 버전으로 코드를 재작성시킬 수 있다. 이를 downleveling이라고 한다.
디폴트로 타입스크립트의 target은 ES3이다. 만약 타겟을 ES6로 변경시킨다면, template string은 변환되지 않게 된다.
- es6를 타겟으로 컴파일하는 커맨드
tsc --target es6 hello.ts- hello.js
function greet(person, date) {
console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", new Date());
