readonly修飾子

このレッスンでは、一度設定した値を変更できないようにするreadonly修飾子の使い方を学びます。「TypeScript readonly 使い方」で調べている方向けです。

プロパティの前にreadonlyを付けると、そのプロパティは初期化のとき(コンストラクタ内など)にしか値を設定できなくなり、それ以降に書き換えようとするとコンパイルエラーになります。

サンプルコードでは、interface Config { readonly apiKey: string; }のように、一度決めたら変更してほしくない設定値をreadonlyにしています。

初心者がよくつまずくのが、「readonlyを付けても実行時には変更できてしまう場合がある」ことです。readonlyはあくまでTypeScriptのコンパイル時のチェックであり、JavaScriptに変換された後は普通のプロパティと同じように動作します。完全に変更を防ぎたい場合は、別の仕組みと組み合わせる必要があります。

実際の開発現場では、APIキーやID、作成日時のように「一度決まったら変わらないはずの値」にreadonlyを付けておくことで、うっかりバグを防げます。

📖 お手本コード

interface Config {
  readonly apiKey: string;
  timeout: number;
}

const config: Config = { apiKey: "abc123", timeout: 3000 };
config.timeout = 5000;
console.log(`apiKey: ${config.apiKey}, timeout: ${config.timeout}`);

✍️ あなたのコード

コードを書いたら「実行する」を押してください

🧪 このサイトではTypeScriptを直接コンパイル・実行できないため、お手本コードと同じ内容を入力できたかをその場で判定します(採点はブラウザ内だけで行われ、どこにも送信されません)。

🎯

ここまでできればゴール達成!
一度決めたら変更されるべきではない設定値を安全に管理できるようになります。