4) Typescript - LiteralTypes

리터럴은 집합적인 타입의 구체적인 서브 타입입니다. 이는 타입 시스템 내부에서 "Hello World"는 string이지만, string은 "Hello World"가 아닌것을 의미합니다.

TS에는 strings, numbers, booleans 세 가지의 리터럴 타입이 있습니다. 리터럴 타입을 이용하여 여러분은 정확한 string, number, boolean 값을 가지도록 정확한 값을 할당 할 수 있습니다.

String Literal Types

string 리터럴 타입은 type, type guard, type alias와 잘 조합됩니다. 여러분은 이 특징을 enum 같은 방식으로 string과 함께 사용할 수 있습니다.

type Easing = 'ease-in' | 'ease-out' | 'ease-in-out'
// 해당 세가지 외에는 사용할 수 없습니다.

class UIElement {
  animate (dx: number, dy: number, easing: Easing) {
    if (easing === 'ease-in') { }
    else if (easing === 'ease-out') { }
    else if (easing === 'ease-in-out') { }
    else {
      // 여러분의 type을 무시함으로써 여기에 도달 할 수 있습니다.
    }
  }
}

let button = new UIElement()
button.animate(0, 0, 'ease-in')
button.animate(0, 0, 'uneasy') // Error! 'uneasy' is not assignable.

string 리터럴 타입은 같은 방법으로 overload를 구별하는데 사용 가능합니다.

function createElement(tagName: "img"): HTMLImageElement
function createElement(tagName: "input"): HTMLInputElement
// ... more overloads ...

function createElement(tagName: string): Element {
  // ... 
}

Numeric Literal Types

TS는 string literal과 유사한 numeric 리터럴 타입을 가집니다.

function rollDice (): 1 | 2 | 3 | 4 | 5 | 6 {
  return (Math.floor(Math.random() * 6) + 1) as 1 | 2 | 3 | 4 | 5 | 6
}

일반적인 사용 케이스는 config 값을 정의하기 위해서 많이 사용합니다.

interface MapConfig {
  lng: number,
  lat: number,
  tileSize: 8 | 16 | 32
}

// function setupMap이 있다고 가정합니다.
setupMap({ lng: 5, lat: 4, titleSize: 16 })

 Boolean Literal Types

TS는 boolean literal Type도 가지고 있습니다. 이러한 값을 사용하여 속성이 상호 연관된 개체 값을 제한할 수 있습니다.

interface ValidationSuccess {
  isValid: true
  reason: null
}

interface ValidationFailure {
  isValid: false
  reason: string
}

type ValidationResult = ValidationSuccess | ValidationFailure