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

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

Aug 23, 2023 pm 02:25 PM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

See all articles