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

翻訳 オリジナルリンク


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


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


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

これで、原点を表すオブジェクトを作成し、 xyを値0で初期化できます。


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

ただし、プロパティxyreadonlyとしてマークされているため、後で値を変更することはできません。


 // 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 、べき乗演算子を使用し計算されることに注意してください。 radiusareaは両方とも読み取り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つの機能であり、コンパイラに不注意な値の割り当てをチェックさせます。



Source: https://habr.com/ru/post/J345202/


All Articles