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());