타입스크립트 리터럴 타입 예제

-

타입스크립트에서 리터럴( Literal ) 타입은 `success`, 200, true 와 같은 값을 타입으로 사용하는 방식이다.
문자열, 숫자, 불리언 리터럴 타입을 통해 값의 범위를 구체적으로 지정하여 사용한다.
타입스크립트 리터럴 타입은 상태 코드를 사용하는 것과 같은 효과를 볼 수 있다.

-

let status: string;

status = "loading";
status = "success";
status = "anything";

-

let status: "loading";

status = "loading"; // 가능
status = "success"; // 오류

-

function showMessage(type: string) {
  console.log(type);
}

showMessage("success");
showMessage("sucess"); // 오타지만 string이므로 통과

-

type MessageType = "success" | "error" | "warning";

function showMessage(type: MessageType) {
  console.log(type);
}

showMessage("success"); // 가능
showMessage("sucess"); // 오류

-

type ButtonSize = "small" | "medium" | "large";

function createButton(size: ButtonSize) {
  return `버튼 크기: ${size}`;
}

createButton("small"); // 가능
createButton("large"); // 가능
createButton("xlarge"); // 오류

-

type DiceNumber = 1 | 2 | 3 | 4 | 5 | 6;

function rollDice(number: DiceNumber) {
  return `주사위 숫자: ${number}`;
}

rollDice(3); // 가능
rollDice(7); // 오류

-

type Rating = 1 | 2 | 3 | 4 | 5;

function review(score: Rating) {
  return `평점은 ${score}점입니다.`;
}

review(5); // 가능
review(10); // 오류

-

type IsAdmin = true;

const adminOnly: IsAdmin = true;

// const userOnly: IsAdmin = false; // 오류

-

type OrderStatus = "pending" | "paid" | "shipped" | "cancelled";

function updateOrderStatus(status: OrderStatus) {
  console.log(`주문 상태: ${status}`);
}

updateOrderStatus("paid"); // 가능
updateOrderStatus("refund"); // 오류

-

type Toast = {
  type: "success" | "error" | "info";
  message: string;
};

const toast: Toast = {
  type: "success",
  message: "저장되었습니다.",
};

-

const wrongToast: Toast = {
  type: "danger", // 오류
  message: "문제가 발생했습니다.",
};

-

type Theme = "light" | "dark";

function setTheme(theme: Theme) {
  document.body.dataset.theme = theme;
}

setTheme("light"); // 가능
setTheme("dark"); // 가능
setTheme("blue"); // 오류

-

type ApiResponse =
  | { status: "success"; data: string[] }
  | { status: "error"; message: string };

function handleResponse(response: ApiResponse) {
  if (response.status === "success") {
    console.log(response.data);
  } else {
    console.log(response.message);
  }
}

-

const direction = "up";

-

const config = {
  mode: "dark",
};

-

const config = {
  mode: "dark",
} as const;

-

type Color = "red" | "blue";
type Size = "small" | "large";

type ClassName = `${Color}-${Size}`;

const class1: ClassName = "red-small"; // 가능
const class2: ClassName = "blue-large"; // 가능
const class3: ClassName = "green-small"; // 오류

-