37. as const — 値をリテラル型で固定する

const で宣言したオブジェクトでも、プロパティの型は "dark" ではなく string のように広い型に推論されます(これを widening と呼びます)。値の後ろに as const を付けると、この広がりが抑えられ、すべてのプロパティが書いたとおりのリテラル型かつ readonly で固定されます。

実務では、アプリの設定値や選択肢の一覧など「この値は二度と変わらない」データに使います。値がリテラル型として残るので、リテラル型を要求する関数にそのまま渡せるようになり、定数の定義が型の世界でもそのまま活きます。

つまずきポイントは、as const を付けた値が readonly になることです。配列に as const を付けると push などの変更系メソッドが使えなくなります。エラーが出たら「固定したのだから書き換えられない」のが正しい挙動だと思い出しましょう。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

// 通常の const では、プロパティの型は string や number に広がる
const normalConfig = { mode: "dark", retry: 1 };

// as const を付けると、値そのものがリテラル型として固定される
const fixedConfig = { mode: "dark", retry: 1 } as const;

console.log(normalConfig.mode);
console.log(fixedConfig.mode);

// normalConfig.mode = "light"; // string 型なので代入できてしまう
// fixedConfig.mode = "light";  // readonly かつ "dark" 型なのでエラー

// 配列も readonly で中身が固定された組になる
const colorSet = ["red", "green", "blue"] as const;
console.log(colorSet[0]);
console.log(colorSet.length);

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗