タイプスクリプト 読み取り専用プロパティ

翻訳 オリジナルリンク







Typescript 2.0



では、 readonly



修飾子が追加されました。 readonly



修飾子でマークされたプロパティは、初期化時、または同じクラスのコンストラクターでのみ割り当てることができます。 他の値の割り当ては禁止されています。







例を見てみましょう。 以下は、2つの読み取り専用プロパティで記述される単純なPoint



タイプです。







 type Point = { readonly x: number; readonly y: number; };
      
      





これで、原点を表すオブジェクトを作成し、 x



y



を値0



で初期化できます。







 const origin: Point = { x: 0, y: 0 };
      
      





ただし、プロパティx



y



readonly



としてマークされているため、後で値を変更することはできません。







 // Error: Left-hand side of assignment expression // cannot be a constant or read-only property origin.x = 100;
      
      





より現実的な例。



上記の例は手に負えないように思えるかもしれませんが、次の関数を見てみましょう。







 function moveX(point: Point, offset: number): Point { point.x += offset; return point; }
      
      





moveX



関数は、渡されたpoint



オブジェクトのx



プロパティを変更してはmoveX



ん。 TypeScript



コンパイラは、プロパティにreadonly



修飾子が付けられているため、これを行おうとすると間違いなく誓うようになりreadonly



。 代わりに、 moveX



は値が変更された新しいオブジェクトを返す必要があります。







 function moveX(p: Point, offset: number): Point { return { x: px + offset, y: py }; }
      
      





これでコンパイラは満足し、 readonly



マークされたプロパティに値を割り当てる試みはもうありません。 更新された値で初期化される新しいオブジェクトを作成しました。







読み取り専用クラスのプロパティ



クラスで説明されているプロパティにreadonly



修飾子を適用することもできreadonly



。 以下は、 readonly



radius



フィールドとarea



プロパティを持つCircle



クラスです。セッターがないため、読み取り専用のアクセシビリティを間接的に実装します。







 class Circle { readonly radius: number; constructor(radius: number) { this.radius = radius; } get area() { return Math.PI * this.radius ** 2; } }
      
      





area



、べき乗演算子を使用し計算されることに注意してください。 radius



area



は両方とも読み取りprivate



としてクラス外からアクセスできます。何もprivate



としてマークされていないため、書き込み用ではありません。







 const unitCircle = new Circle(1); unitCircle.radius; // 1 unitCircle.area; // 3.141592653589793 // Error: Left-hand side of assignment expression // cannot be a constant or read-only property unitCircle.radius = 42; // Error: Left-hand side of assignment expression // cannot be a constant or read-only property unitCircle.area = 42;
      
      





読み取り専用インターフェイスのフィールド



インターフェイスフィールドは、読み取り専用としてマークすることもできます。 たとえば、 ReadOnlyArray<T>



は、説明されているプロパティに値が書き込まれないようにします。







 interface ReadonlyArray<T> { readonly length: number; // ... readonly [n: number]: T; }
      
      





次の割り当ては無効になります。







 const primesBelow10: ReadonlyArray<number> = [2, 3, 5, 7]; // Error: Left-hand side of assignment expression // cannot be a constant or read-only property primesBelow10[4] = 11;
      
      





readonly









readonly



修飾子は、 TypeScript



型システムの一部です。 値の不正な割り当てをチェックするためにコンパイラーによってのみ使用されます。 TypeScript



コードがJavaScript



コンパイルされるとすぐに、 readonly



の概念はなくなりreadonly



ちょっとした例を試して、どの読み取り専用プロパティがコンパイルされているかを確認してください。







readonly



修飾子はコンパイル中のアーティファクトにすぎないため、コード実行中の値の割り当てに対する保護ではありません。 ただし、これは適切なコードの記述に役立つTypeScript



のもう1つの機能であり、コンパイラに不注意な値の割り当てをチェックさせます。








All Articles