# 1. The Basics

## Static type-checking

> **자바스크립트** : **dynamic typing**
>
> * 자바스크립트는 **런타임**에 발생하는 에러에 대해서 미리 알지 못한다.
>
> **타입스크립트** : **static type-checking** (정적 타입 체크)
>
> * 타입스크립트는 프로그램이 실행되기 전에 타입이 올바른지를 확인해준다.
> * **정적 타입 시스템**은 프로그램이 실행될 때, value의 모양과 행동이 어떠한지를 설명해준다.
> * 타입스크립트는 해당 정보를 사용하여, 이 프로그램 실행 결과 어떤 에러가 발생하는지를 말해줄 수 있다.

![](https://i.imgur.com/VnrCu2y.png)

## Non-exception Failures

> **자바스크립트**

* 자바스크립트는 런타임 에러를 던질 수 있다.
  * 예를 들어, callable하지 않는 string을 호출할 경우에 에러를 던진다.
* 런타임에도 에러를 던지지 않는 경우가 있다.
  * 예를 들어 객체에서 존재하지 않는 프로퍼티에 접근하면 에러를 던지지 않고 undefined를 반환한다.

    <img src="https://i.imgur.com/4S5i0j1.png" alt="" data-size="original">

> **타입스크립트**

* 정적 타입 시스템에서는 자바스크립트에서는 valid하기에 바로 에러를 던지지 않는 코드에 대해서도, 에러라고 말해준다.

![](https://i.imgur.com/8wiqeiH.png)

* 오타, 호출되지 않는 함수, 단순한 로직 에러에서도 에러를 던진다.

## Types for Tooling

타입스크립트는 실수를 처음 코드를 작성할 때부터 방지할 수 있게 도와준다.

* 타입스크립트는 프로퍼티를 **제안**해줄 수 있다.
* **코드를 작성하는 중**에도 **에러 메시지**를 보여주거나, 코드 **자동완성**을 해줄 수 있다.
* 타입스크립트를 지원하는 에디터에서는 자동으로 에러를 고쳐주거나, 리팩토링해주거나, 변수의 정의로 이동하게 해주거나, 변수의 모든 reference를 찾게해주는 등의 기능을 제공한다.

## `tsc`, 타입스크립트 컴파일러

* tsc는 타입스크립트 파일을 **자바스크립트 파일로 컴파일시킨다.**
* tsc는 컴파일 과정에서 에러를 커맨드라인으로 보여준다.

```typescript
// This is an industrial-grade general-purpose greeter function:
function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");
```

![](https://i.imgur.com/5jXtZoy.png)

## Explicit Types

> **명시적인 타입**

* 타입을 명시적으로 작성할 수 있다.

```typescript
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
```

> **타입 추론**

* 명시적인 타입이 없다면, 타입스크립트는 타입을 **추론**한다.
* 타입스크립트가 같은 타입을 추론하게 된다면, 타입을 명시하지 않는 것이 좋다.

![](https://i.imgur.com/9PPCSX9.png)

## Erased Types

* hello.ts

  ```typescript
    function greet(person: string, date: Date) {
      console.log(`Hello ${person}, today is ${date.toDateString()}!`);
    }

    greet("Maddison", new Date());
  ```
* hello.js

  ```javascript
    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

```javascript
function greet(person, date) {
    console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", new Date());
```
