TypeScriptのas constとは？具体的な使い方と2つの注意点

// constで宣言した変数 → リテラル型のまま推論される
const direction = "left";
// type: "left" ← "left"というリテラル型

// letで宣言した変数 → string型に拡大される（widening）
let direction = "left";
// type: string ← "left"ではなくstringになる

// constで宣言していても、プロパティはwideningされる
const config = { direction: "left" };
// type: { direction: string } ← "left"ではなくstringになる

function move(dir: "left" | "right") {
  console.log(dir);
}

move(config.direction);
// エラー: Argument of type 'string' is not assignable to parameter of type '"left" | "right"'

// as const を付けると型が固定される
const config = { direction: "left" } as const;
// type: { readonly direction: "left" } ← "left"のまま推論される

function move(dir: "left" | "right") {
  console.log(dir);
}

move(config.direction); // OK！ "left" 型として認識されるのでエラーなし

const obj = { ... } as const; // オブジェクトの末尾
const arr = [ ... ] as const; // 配列の末尾
const value = "left" as const; // リテラル値の末尾

// as const なし
const theme = {
  color: "blue",
  size: 16,
};
// type: { color: string; size: number }

theme.color = "red"; // エラーにならない（変更できてしまう）

// as const あり
const theme = {
  color: "blue",
  size: 16,
} as const;
// type: { readonly color: "blue"; readonly size: 16 }

theme.color = "red"; // エラー: Cannot assign to 'color' because it is a read-only property

const config = {
  api: {
    host: "example.com",
    port: 8080,
  },
} as const;

// type: { readonly api: { readonly host: "example.com"; readonly port: 8080 } }

// as const なし
const colors = ["red", "green", "blue"];
// type: string[] ← 要素はどれもstringとして扱われる

// as const あり
const colors = ["red", "green", "blue"] as const;
// type: readonly ["red", "green", "blue"] ← 各要素のリテラル型が保持される

// 戻り値の型にwideningが起きる
function getDirection() {
  return "left";
  // 戻り値の型: string ← wideningされる
}

// as const で固定する
function getDirection() {
  return "left" as const;
  // 戻り値の型: "left" ← リテラル型のまま
}

// enumを使う書き方
enum Direction {
  Left = "left",
  Right = "right",
  Up = "up",
  Down = "down",
}

// as constを使った代替
const Direction = {
  Left: "left",
  Right: "right",
  Up: "up",
  Down: "down",
} as const;

// どちらも同じように使える
function move(dir: string) {}
move(Direction.Left); // "left"

const STATUS = ["active", "inactive", "pending"] as const;
// type: readonly ["active", "inactive", "pending"]

type Status = typeof STATUS[number];
// type: "active" | "inactive" | "pending"

const Direction = {
  Left: "left",
  Right: "right",
  Up: "up",
  Down: "down",
} as const;

type DirectionType = typeof Direction[keyof typeof Direction];
// type: "left" | "right" | "up" | "down"

function move(dir: DirectionType) {
  console.log(dir);
}

move(Direction.Left); // OK
move("left");         // OK
move("diagonal");     // エラー: 型が合わない

// OK: その場に直接書いた値に付ける
const config = { host: "localhost" } as const;
const status = "active" as const;

// NG: 変数を経由する
const obj = { host: "localhost" };
const config = obj as const; // エラー

// NG: 式全体には付けられない
const x = (Math.random() < 0.5 ? 0 : 1) as const; // エラー

// OK: 式の中の各リテラルに個別に付ける
const x = Math.random() < 0.5 ? (0 as const) : (1 as const);

const arr = [1, 2, 3];

const obj = {
  items: arr,
} as const;
// type: { readonly items: number[] }

obj.items = [];    // エラー: readonly なので再代入は不可
obj.items.push(4); // OK: arr が number[] のままなので push は通る