Programmingフロントエンド開発者

TypeScriptにおけるキーワード'readonly'について教えてください。その適用時期と方法は?constとの違いは何ですか?

Hintsage AIアシスタントで面接を突破

回答。

TypeScriptにおけるキーワードreadonlyは、オブジェクトや配列のプロパティに適用され、初期化後の変更を禁止するために使用されます:

  • インターフェイス、型、クラスの説明に使用され、フィールドの値を設定後に変更できないようにします。
  • readonlyはオブジェクトのプロパティにのみ適用され、変数には適用されません。
  • constが変数を再代入できないことを示すのに対し、オブジェクトの内容を変更することを禁止しないのに対して、readonlyはフィールドや配列の要素の変更を明示的に禁止します。

例:

interface User { readonly id: number; name: string; } const user: User = { id: 1, name: 'Anna' }; user.id = 2; // エラー: 'id'に再代入できません。これは読み取り専用のプロパティです。

配列に関して:

const nums: readonly number[] = [1, 2, 3]; nums.push(4); // エラー: 'readonly number[]'型には'push'プロパティが存在しません。

トリッククエスチョン。

TypeScriptにおけるconstreadonlyの違いは何ですか?相互に置き換え可能ですか?

回答: いいえ、置き換え可能ではありません。constは変数自体に対する制約(再代入できない)であり、readonlyはオブジェクトの各プロパティまたは配列の要素に対する制約ですが、変数自体は(コンテキストで許可されている場合)変更できます。

例:

const arr: readonly number[] = [1, 2, 3]; // arr = [2, 3, 4]; // constのためエラー // arr[0] = 5; // readonlyのためエラー

逸話

金融プラットフォームのプロジェクトでは、ユーザーデータを扱う際にnumber[]の通常の配列を使用していました。そのため、一つの関数が誤って入力データを変更してしまい、配列の合計値が異なる場所で使われたことで報告書の不一致を引き起こしました。数日後にエラーが発見され、会社は監査とデータ復旧に時間を費やしました。


逸話

社内APIでconstreadonlyを混同し、const user: Userがフィールドの変更を防ぐと考えました。その結果、オブジェクトのフィールドを変更できることが分かり、これは仕様書に反していました。違いを知らなかったため、サービス間で機密データの漏えいが発生しました。


逸話

オープンソースライブラリの一部として、インターフェイスの定義にreadonlyを忘れたために、データ構造の一つが偶然に変更可能になりました。これにより、外部の開発者がランタイムでプライベートデータを変更できるようになり、バグが発生し、その解決にはリファクタリングが必要でした。