TypeScript : The Basics

Typescript documentation의 Handbook-The Basics ,
2.0 release note,
위키의 Type System
글을 참고하였다.

타입스크립트는 자바스크립트에 타입 시스템 을 지원한다.

• 타입 시스템이 뭔데?
  타입 시스템은 변수나, expression, function 등 프로그램을 구성하는 구조들에 type이라는 속성을 할당하는 규칙들을 갖는 시스템이다. 타입 시스템은 타입과 값들을 비교하고 이러한 값들이 어떻게 이용되는 지를 분석하여 버그의 확률을 줄이는 것을 목표로 한다.

• 자바스크립트는 dynamic typing 을 지원한다.
  type checking이 대부분 run-time에 진행되며, 타입은 변수가 아닌 값 value과 매핑된다. type error는 runtime에 발생하기 때문에 에러를 확인하기 위해서는 코드를 작동시켜봐야 한다.

• 그래서 타입스크립트는 static type-checking을 추가로 지원한다.
  type checking이 compile-time에 진행된다. type이 값이 아니라 변수와 매핑되며, 대부분의 type error들을 미리 캐치할 수 있도록한다.
  → 실제 코드를 작동시키기 전에 미리 버그들을 찾아서 고칠 수 있다!

Non-exception Failure

자바스크립트가 모든 unexpected behavior에 runtime error를 던지지는 않는다. 예를 들어 존재하지 않는 property에 접근할 때, 자바스크립트는 runtime error 대신, undefined를 리턴한다.

이렇게 자바스크립트가 runtime error를 던지지 않는 상황에서도 타입스크립트는 Error를 발생시켜 우리가 원하지 않는 결과가 나오는 상황을 미리 방지해준다.

const user = {
  name: "Daniel",
  age: 26,
};

user.location;

위와 같은 코드는 타입스크립트에서
Property 'location' does not exist on type '{ name: string; age: number; }'. 라는 에러를 발생시킨다.

---

추가적으로 uncalled function이나 basic logic error들에 대해서도 타입스크립트는 에러를 발생시킨다.

• uncalled function

function flipCoin() {
  // Meant to be Math.random()
  return Math.random < 0.5; // ERROR
}

-- ERROR : Operator '<' cannot be applied to types '() => number' and 'number'.

• basic logic error

const value = Math.random() < 0.5 ? "a" : "b";
if (value !== "a") {
  // ...
} else if (value === "b") {
  // Oops, unreachable
  // ERROR
}

-- ERROR : This condition will always return 'false' since the types '"a"' and '"b"' have no overlap.

Conversion of TS to JS

• 타입스크립트의 컴파일러인 tsc는 타입스크립트 파일을 자바스크립트 파일로 바꿔준 후 실행시킨다.

• 그럼 타입스크립트가 자바스크립트로 변환할 때 어떤 일이 생길까?

1. Type annotation이 지워진다.
2. Template string(백틱`을 이용한 string)이 concatenation(+)으로 변환된다.

• 1은 자바스크립트가 Type annotation을 지원하지 않기 때문이고, 2는 TS가 자바스크립트를 old version으로 rewrite하는 DOWNLEVELING을 지원하기 때문이다. (default인 ES3는 탬플릿 스트링을 지원하지 않는다)
  → 타겟 버전을 지정하여 위의 변경을 막을 수 있다. tsc --target es2015 file.ts

Strictness

• 타입스크립트에서는 기본적으로 타입 지정이 필수가 아니며, 모든 타입에 null이나 undefined를 할당하는 것이 가능하다.

• 추가적으로 STRICTNESS FLAGS 를 추가하여 좀 더 강력한 TYPE-CHECKING을 이용할 수 있다.

  • noImplicitAny : will issue an error on any variables whose type is implicitly inffered as 'any'

  • strictNullChecks : 원래 모든 타입에 null/undefined를 할당 가능한 것이 금지된다. null 또는 Any 타입인 경우에만 null을 할당 가능하다. (undefined도 마찬가지) mores