Type Annotation

Type Annotation은 TypeScript가 가지는 고유의 기능입니다.
어떻게 보면 JavaScript와 가장 차별되는 기능으로 볼 수 있습니다.

Type 이라는 요소가 code상에 들어나는 방식입니다.

preview

• TypeScript는 처음 들어오는 값으로 타입을 지정합니다.
• 처음에 string 값을 받아서 변수 a는 string Type이 됩니다. string타입의 변수 a에는 number type의 값을 넣을 수 없습니다.

• 선언만 했을 경우 any 타입이 됩니다.

변수에 타입을 지정해주는 것을 Type Annotation 이라고 합니다.

• 변수 a 의 타입을 string에서 number로 변경하면 string 타입인 "Mark"는 변수에 할당할 수 없습니다.

• 함수의 매개변수에도 Type Annotation 설정이 가능합니다.

TypeScript Types vs Dynamic Types

• TypeScript는 Static Type입니다.
  - Static Type은 개발하는 중간에 Type을 체크합니다.
• JavaScript는 Dynamic Type입니다.
  - Dynamic Type은 개발할 때는 알 수 없고, 실제로 runtime에 돌입해야만 잘못된 것인지 알 수 있습니다.

// JavaScript

function add(n1, n2) {
  if(typeof n1 !== 'number' || typeof n2 !== 'number') {
    throw new Error('Incorrect input!');
  }
  return n1 + n2;
}

const result = add(39, 28);

// TypeScript

function add(n1: number, n2: number) {
  return n1 + n2;
}

const result = add(39, 28);

• TypeScript는 JavaScript 처럼 runtime에서 체크를 할 필요 없이, 개발중에 체크를 해줍니다. 그렇기 때문에 한 스텝 먼저 에러를 확인할 수 있습니다.

자료형

JavaScript 기본 자료형을 포함하여 몇가지 타입이 더 제공됩니다.

JavaScript 자료형

• Boolean
• Number
• String
• Null
• Undefined
• Symbol (ECMAScript 6 에 추가)
• Array : object형

TypeScript에서만 추가된 자료형

프로그래밍을 도울 몇가지 타입이 더 제공됩니다.

• Any, Void, Never, Unknown
• Enum
• Tuple : object형