ホームページ > ウェブフロントエンド > jsチュートリアル > Typescript オブジェクトのインデックス付きメンバーに型を強制する方法

Typescript オブジェクトのインデックス付きメンバーに型を強制する方法

PHPz
リリース: 2023-08-23 14:25:02
転載
855 人が閲覧しました

Typescript オブジェクトのインデックス付きメンバーに型を強制する方法

#プログラミング言語 TypeScript は、厳密に型指定され、オブジェクト指向でコンパイルされる JavaScript に基づいています。この言語は、静的型付け、クラス、インターフェイスなどのツールによって改良されており、早期のエラー検出を支援し、JavaScript をより管理しやすくしています。 TypeScript の機能は、オブジェクトのインデックス付きメンバーの型を強制する機能であり、このプロセスはインデックス署名とも呼ばれます。

インデックス署名は、オブジェクトが持つ可能性のある多くのプロパティを記述するキーと値のペアのセットです。プロパティ名の型とプロパティ値の型をそれぞれ値とキーを使用して指定します。オブジェクトのプロパティの種類を強制するために、ユーザーは TypeScript のインデックス署名機能を利用できます。

インデックス署名は、特定のオブジェクトのプロパティを効果的に強制できますが、コードの理解と保守が難しくなる可能性もあります。したがって、必要な場合にのみインデックス署名を使用することが非常に重要です。

###文法### リーリー

上記の構文では、「objectName」はオブジェクトの名前であり、キーは文字列型、値は文字列になるように強制します。

例 1

この例には、Person と PhoneBook という 2 つのインターフェイスがあります。 Person インターフェイスは、名前 (文字列) と年齢 (数値) の 2 つの属性を含む人物オブジェクトの構造を定義します。 PhoneBook インターフェイスは、文字列タイプをキーとして使用し、Person インターフェイスを値として使用して、インデックス署名を定義します。これは、PhoneBook インターフェイスを実装するオブジェクトは、キーの種類が String で値の種類が Person のプロパティのみを持つことができることを意味します。

次に、変数 PhoneBook (タイプ PhoneBook) を定義し、空のオブジェクトを割り当てました。次に、電話帳にいくつかのエントリを追加します。キーは名前、値は Person オブジェクトである必要があります。最後に、上記の型以外の変数を入力しようとすると、コンパイラがエラーを報告することをコンソール ログで確認します。

リーリー

コンパイル時に、次の JavaScript コードが生成されます −

リーリー

出力

上記のコードは次の出力を生成します -

リーリー

例 2

この例では、Product インターフェイスがあり、名前 (文字列) と価格 (数値) の 2 つのプロパティを持つ製品オブジェクトの構造を定義します。次に、数値型をキーとして使用し、Product インターフェイスを値として使用するインデックス署名を表す別のインターフェイス ShoppingCart があります。 ShoppingCart インターフェイスを実装するオブジェクトは、キー タイプが Number で値タイプが Product のプロパティのみを持つことができます。

次に、ShoppingCart 型の変数カートを定義し、それに空のオブジェクトを割り当てます。次に、キーが製品 ID であり、値が製品オブジェクトである必要があるいくつかのエントリをショッピング カートに追加します。アイテムがカートに正しく追加されていることがわかります。値のタイプが Product でない場合、または製品オブジェクトに Product インターフェイスで定義されているプロパティが欠落している場合は、エラーが発生します。

リーリー

コンパイルすると、次の JavaScript コードが生成されます -

リーリー

出力

上記のコードは次の出力を生成します -

リーリー

これらの例は、インデックス署名を使用してオブジェクトのプロパティ タイプを強制する方法を示しています。インデックス署名は、より堅牢で保守しやすいコードを作成するのに役立つ強力な機能ですが、必要な場合にのみ賢明に使用することが重要です。

以上がTypescript オブジェクトのインデックス付きメンバーに型を強制する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート