#029　TypeScript（13）：as const の使用方法と特徴

as const とは？

• 説明: as const を使用することで、値やオブジェクトをリテラル型として扱い、読み取り専用にすることができます。これにより、その値や構造が他の値に変更されることを防ぎます。

as const の使用方法

プリミティブ値に使用

• 説明: 文字列、数値、真偽値などの基本的な値を特定の値として扱います。

const status = "success" as const;

オブジェクトに使用

• 説明: オブジェクトのすべてのプロパティが readonly になります。ネストされたオブジェクトや配列も再帰的に readonly になります。

const config = {
  apiUrl: "https://api.example.com",
  maxRetries: 3
} as const;

配列に使用

• 説明: 配列が readonly タプルとして扱われます。配列の要素が特定の値として扱われ、変更や追加ができなくなります。

const colors = ["red", "green", "blue"] as const;

as const を使用する利点

1. 型の精度向上: より具体的な型情報を提供し、型推論を強化します。

2. 不変性の保証: 値やオブジェクトの構造が変更されないことを保証します。

3. コンパイル時のチェック強化: 意図しない変更をコンパイル時に検出できます。

初心者向けの考え方

• 「永久保存された写真」: 撮影後に編集や変更ができない、その瞬間を正確に捉えたものです。

• 「化石」: 過去の生物の形を完全に保存し、変更不可能な状態で残されています。

as const の使用例

設定値や定数の定義

const CONFIG = {
  API_URL: "https://api.example.com",
  MAX_RETRIES: 3
} as const;

列挙型の代替

const COLORS = ["red", "green", "blue"] as const;
type Color = typeof COLORS[number];  // "red" | "green" | "blue"

関数のパラメータや戻り値の型を厳密に指定

function getUser() {
  return { id: 1, name: "Alice" } as const;
}

注意点

• as const は値の不変性を型システムレベルで保証しますが、実行時の変更を完全に防ぐものではありません。

• 過剰に使用すると、コードの柔軟性が失われる可能性があるため、適切な場面で使用することが重要です。

サンプルコード

// プリミティブ値に使用
const judge = "success" as const;
console.log("Judge:", judge);

// オブジェクトに使用
const config = {
    apiUrl: "https://api.example.com",
    maxRetries: 3
} as const;

console.log("Config:", config);

// config.apiUrl = "https://another.api.com"; // エラー: 読み取り専用プロパティに値を割り当てることはできません

// 配列に使用
const colors = ["red", "green", "blue"] as const;
console.log("Colors:", colors);

// colors.push("yellow"); // エラー: 読み取り専用プロパティに変更を加えることはできません

// 列挙型の代替
// colors 配列にインデックスアクセス型 number を使うことで、配列のすべての要素の型を取得できます。
// 具体的には、colors 配列の各要素の型は "red" | "green" | "blue" となります。
type Color = typeof colors[number];
const myColor: Color = "red";
console.log("My Color:", myColor);

// 関数のパラメータや戻り値の型を厳密に指定
function getUser() {
    return { id: 1, name: "Naitou" } as const;
}

const user = getUser();
console.log("User:", user);

// user.id = 2; // エラー: 読み取り専用プロパティに値を割り当てることはできません

まとめ

重要な設定値や変更されるべきでないデータを扱う際に、as const を活用してください。

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。