Literal Types

장유진·2022년 6월 22일
1

TypeScript

목록 보기
6/14

https://www.typescriptlang.org/docs/handbook/literal-types.html

TypeScript에서 literal type의 종류는 string, number, boolean으로 세 가지이다.
완벽하게 이해하지는 못했지만 literal은 상수값이라고 생각하면 되는 것 같다. "hello", 12, true 등이 그 예이다.

Literal Narrowing

// So, TypeScript sets the type to be "Hello World" not string
const helloWorld = "Hello World";

// On the other hand, a let can change, and so the compiler declares it a string
let hiWorld = "Hi World";

helloWorld 변수의 경우처럼 변수의 값과 타입이 변할 가능성을 없애는 것을 narrowing이라고 한다.

String Literal Types

string literal 타입은 union type, type guard, type alias를 사용할 수 있다.

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 {
      // It's possible that someone could reach this
      // by ignoring your types though.
    }
  }
}

또한 string literal 타입은 오버로딩을 구분하는 용도로 쓰이기도 한다.

function createElement(tagName: "img"): HTMLImageElement;
function createElement(tagName: "input"): HTMLInputElement;
// ... more overloads ...
function createElement(tagName: string): Element {
  // ... code goes here ...
}

나머지 numeric, boolean literal 타입도 string literal 타입처럼 사용이 가능하다.

Numeric Literal Types

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

Boolean Literal Types

interface ValidationSuccess {
  isValid: true;
  reason: null;
}

interface ValidationFailure {
  isValid: false;
  reason: string;
}

type ValidationResult = ValidationSuccess | ValidationFailure;
profile
프론트엔드 개발자

0개의 댓글