TS 기초 - 리터럴 타입

시작

• 간단한 CRUD를 위해 화면을 React - Typescript 만들다 보니 Typescript에 대한 공부가 필요하다고 느꼈다. 단순히 변수에 타입을 정해주는 수준이 아닌 Typescript를 편하게 사용하기 위해 기초부터 공부해보려 한다.
  https://typescript-kr.github.io/pages/basic-types.html#%EC%86%8C%EA%B0%9C-introduction
• 상단 사이트를 통해 공부하고 몰랐던 부분을 적어보고 내것으로 만들어보려 한다.

리터럴 타입 좁히기 (Literal Narrowing)

• var 또는 let으로 변수 선언 시 변수의 값이 변경될 수 있음을 TS에게 알린다.
• const로 선언 시 TS에게 이 객체는 절대 변경되지 않음을 알린다.

// const를 사용하여 변수 helloWorld가
// 절대 변경되지 않음을 보장합니다.

// 따라서, TypeScript는 문자열이 아닌 "Hello World"로 타입을 정합니다.
const helloWorld = "Hello World";

// 반면, let은 변경될 수 있으므로 컴파일러는 문자열이라고 선언할 것입니다.
let hiWorld = "Hi World";

• 무한한 수의 잠재적 케이스들 (문자열 값은 경우의 수가 무한대)을 유한한 수의 잠재적 케이스 (helloWorld의 경우: 1개)로 줄여나가는 것을 타입 좁히기 (narrowing)라 한다.

문자열 리터럴 타입 (String Literal Types)

• enum처럼 문자열을 이용해서 타입 선언이 가능하다.

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 {
      // ...
    }
  }
}

let button = new UIElement();
button.animate(0, 0, "ease-in");
button.animate(0, 0, "uneasy"); // Error발생

숫자형 리터럴 타입 (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;
}

const result = rollDice();

다음 포스팅에 이어서...