TypeScriptのリテラル型を活用して型安全なコーディングを実現する方法

let answer: "yes" | "no";

answer = "yes"; // 正常
answer = "no";  // 正常
answer = "maybe"; // エラー: 型 '"maybe"' を型 '"yes" | "no"' に割り当てることはできません。

let option: 1 | 2;

option = 1; // 正常
option = 2; // 正常
option = 3; // エラー: 型 '3' を型 '1 | 2' に割り当てることはできません。

type Status = "active" | "inactive" | "pending";

function updateStatus(status: Status) {
  console.log(`ステータスが${status}に更新されました。`);
}

updateStatus("active");   // 正常
updateStatus("inactive"); // 正常
updateStatus("done");     // エラー: 型 '"done"' を型 'Status' に割り当てることはできません。

const Config = {
  theme: "dark" as const,
  language: "en" as const
};

function applyConfig(config: typeof Config) {
  console.log(`テーマ: ${config.theme}, 言語: ${config.language}`);
}

applyConfig(Config); // 正常

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

function selectSize(size: Size) {
  console.log(`選択されたサイズ: ${size}`);
}

selectSize("small");  // 正常
selectSize("medium"); // 正常
selectSize("extra-large"); // エラー: 型 '"extra-large"' を型 'Size' に割り当てることはできません。

type Mode = "auto" | "manual";
type Status = "on" | "off";

function setMode(mode: Mode, status: Status) {
  console.log(`モード: ${mode}, ステータス: ${status}`);
}

setMode("auto", "on");   // 正常
setMode("manual", "off"); // 正常
setMode("auto", "pause"); // エラー: 型 '"pause"' を型 'Status' に割り当てることはできません。

type Size = "small" | "medium" | "large";
type Label = `${Size}-shirt`;

let myShirt: Label;

myShirt = "small-shirt";  // 正常
myShirt = "large-shirt";  // 正常
myShirt = "extra-large-shirt"; // エラー: 型 '"extra-large-shirt"' を型 'Label' に割り当てることはできません。

type Action = "create" | "update" | "delete";
type State = "success" | "failure";

type LogMessage = `${Action}-${State}`;

function logAction(message: LogMessage) {
  console.log(`ログ: ${message}`);
}

logAction("create-success"); // 正常
logAction("delete-failure"); // 正常
logAction("update-error");   // エラー: 型 '"update-error"' を型 'LogMessage' に割り当てることはできません。

type Endpoint = "user" | "post";
type Method = "get" | "post";

type APIRequest = `${Method}/api/${Endpoint}`;

function fetchFromAPI(request: APIRequest) {
  console.log(`APIリクエスト: ${request}`);
}

fetchFromAPI("get/api/user");  // 正常
fetchFromAPI("post/api/post"); // 正常
fetchFromAPI("delete/api/user"); // エラー: 型 '"delete/api/user"' を型 'APIRequest' に割り当てることはできません。

let greeting = "hello";

const greetingConst = "hello"; // greetingConstの型は "hello"
let greetingLiteral: "hello" = "hello"; // 明示的なリテラル型の指定

function printMessage(message: "success" | "error") {
  console.log(message);
}

let userMessage = "success";
printMessage(userMessage); // エラー: 型 'string' を型 '"success" | "error"' に割り当てることはできません。

let userMessage: "success" = "success";
printMessage(userMessage); // 正常

type ErrorStatus = "404" | "500" | "403";
type ErrorMessage = "Not Found" | "Internal Server Error" | "Forbidden";

function handleError(status: ErrorStatus, message: ErrorMessage) {
  console.log(`エラーが発生しました。ステータス: ${status}, メッセージ: ${message}`);
}

handleError("404", "Not Found");  // 正常
handleError("500", "Internal Server Error");  // 正常
handleError("400", "Bad Request");  // エラー: 型 '"400"' を型 'ErrorStatus' に割り当てることはできません。

type ApiError = {
  status: "404" | "500" | "403";
  message: "Not Found" | "Internal Server Error" | "Forbidden";
};

function logApiError(error: ApiError) {
  console.log(`APIエラー: ステータス - ${error.status}, メッセージ - ${error.message}`);
}

const error: ApiError = { status: "404", message: "Not Found" };
logApiError(error); // 正常

const invalidError: ApiError = { status: "400", message: "Bad Request" }; 
// エラー: 型 '"400"' を型 '"404" | "500" | "403"' に割り当てることはできません。

type ErrorMap = {
  "404": "Not Found";
  "500": "Internal Server Error";
  "403": "Forbidden";
};

function getErrorMessage<T extends keyof ErrorMap>(status: T): ErrorMap[T] {
  const messages: ErrorMap = {
    "404": "Not Found",
    "500": "Internal Server Error",
    "403": "Forbidden"
  };
  return messages[status];
}

const errorMessage = getErrorMessage("404");  // 正常: "Not Found"
const invalidMessage = getErrorMessage("400");  // エラー: 型 '"400"' を型 'keyof ErrorMap' に割り当てることはできません。

type RequestState = "loading" | "success" | "error";

function handleRequest(state: RequestState) {
  switch (state) {
    case "loading":
      console.log("リクエスト中...");
      break;
    case "success":
      console.log("リクエストが成功しました！");
      break;
    case "error":
      console.log("リクエストに失敗しました。");
      break;
    default:
      // このケースはリテラル型により発生しないことが保証されています
      console.log("未知の状態");
  }
}

handleRequest("loading");  // 正常
handleRequest("success");  // 正常
handleRequest("failed");   // エラー: 型 '"failed"' を型 'RequestState' に割り当てることはできません。

type CartState = "empty" | "loading" | "filled" | "error";
type CartAction = "addItem" | "removeItem" | "checkout";

function updateCart(state: CartState, action: CartAction): CartState {
  switch (action) {
    case "addItem":
      return state === "empty" || state === "filled" ? "filled" : state;
    case "removeItem":
      return state === "filled" ? "empty" : state;
    case "checkout":
      return state === "filled" ? "loading" : state;
    default:
      return state;
  }
}

let currentState: CartState = "empty";
currentState = updateCart(currentState, "addItem"); // 状態は "filled" に変わる
currentState = updateCart(currentState, "checkout"); // 状態は "loading" に変わる
console.log(currentState); // 出力: "loading"

type State = "idle" | "loading" | "success" | "error";
type AllowedAction<StateType> = 
  StateType extends "idle" ? "start" :
  StateType extends "loading" ? "cancel" :
  StateType extends "success" ? "reset" :
  StateType extends "error" ? "retry" : never;

function transition<StateType extends State>(
  state: StateType, action: AllowedAction<StateType>
): State {
  switch (state) {
    case "idle":
      if (action === "start") return "loading";
      break;
    case "loading":
      if (action === "cancel") return "idle";
      break;
    case "success":
      if (action === "reset") return "idle";
      break;
    case "error":
      if (action === "retry") return "loading";
      break;
  }
  return state;
}

let currentState2: State = "idle";
currentState2 = transition(currentState2, "start");  // 状態は "loading" に変わる
currentState2 = transition(currentState2, "cancel"); // 状態は "idle" に戻る
console.log(currentState2); // 出力: "idle"

let action: "start" | "stop" = "start"; // 明示的な型指定
action = "stop"; // 正常
action = "pause"; // エラー: 型 '"pause"' を型 '"start" | "stop"' に割り当てることはできません。

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

function setConfig(c: typeof config) {
  console.log(`設定: モードは ${c.mode}、言語は ${c.language}`);
}

setConfig(config); // 正常

type Direction = "up" | "down" | "left" | "right";

function move(direction: Direction) {
  console.log(`移動方向: ${direction}`);
}

move("up");   // 正常
move("down"); // 正常
move("north"); // エラー: 型 '"north"' を型 'Direction' に割り当てることはできません。

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

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

function selectShirt(shirt: Shirt) {
  console.log(`選択されたシャツ: ${shirt}`);
}

selectShirt("medium-red");   // 正常
selectShirt("large-green");  // 正常
selectShirt("extra-large-blue"); // エラー: 型 '"extra-large-blue"' を型 'Shirt' に割り当てることはできません。

type Status = "pending" | "completed" | "failed";

function updateStatus(status: Status) {
  console.log(`ステータスを更新: ${status}`);
}

function logStatus(status: Status) {
  console.log(`ログ: 現在のステータスは ${status}`);
}

updateStatus("pending");  // 正常
logStatus("completed");   // 正常

function handleApiResponse(status: string) {
  switch (status) {
    case "success":
      console.log("データが正常にロードされました。");
      break;
    case "error":
      console.log("エラーが発生しました。");
      break;
    case "loading":
      console.log("データをロード中です...");
      break;
    default:
      console.log("不明なステータスです。");
  }
}

handleApiResponse("success");  // 正常
handleApiResponse("error");    // 正常
handleApiResponse("finished"); // エラーにするにはどうすれば良いか？

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

function chooseShirt(size: Size, color: string) {
  console.log(`選択されたシャツ: サイズは ${size}、色は ${color}`);
}

chooseShirt("medium", "blue");   // 正常
chooseShirt("large", "yellow");  // エラーにするにはどうするか？

type State = "idle" | "loading" | "success" | "error";

function transitionState(currentState: State, action: string): State {
  switch (currentState) {
    case "idle":
      return action === "start" ? "loading" : currentState;
    case "loading":
      return action === "finish" ? "success" : action === "fail" ? "error" : currentState;
    case "success":
    case "error":
      return action === "reset" ? "idle" : currentState;
    default:
      return currentState;
  }
}

let currentState: State = "idle";
currentState = transitionState(currentState, "start");  // "loading" になる
currentState = transitionState(currentState, "finish"); // "success" になる

type ApiError = {
  status: "404" | "500" | "403";
  message: string;
};

function logError(error: ApiError) {
  console.log(`ステータス: ${error.status}, メッセージ: ${error.message}`);
}

logError({ status: "404", message: "Not Found" });   // 正常
logError({ status: "401", message: "Unauthorized" }); // エラーにするには？

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

function describeShirt(shirt: Shirt) {
  console.log(`選択されたシャツは ${shirt} です。`);
}

describeShirt("small-red");   // 正常
describeShirt("large-yellow"); // エラーにするには？