ホームページ  >  記事  >  ウェブフロントエンド  >  TypeScript のインターフェイス プロパティのみに JavaScript オブジェクトを減らすにはどうすればよいですか?

TypeScript のインターフェイス プロパティのみに JavaScript オブジェクトを減らすにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-31 06:12:01636ブラウズ

How to Reduce JavaScript Objects to Only Interface Properties in TypeScript?

JavaScript オブジェクトをインターフェイス プロパティに縮小する

TypeScript を使用する場合、JavaScript オブジェクトを、で宣言されたプロパティのみを含むように縮小する必要があることがよくあります。インターフェース。これは、特定のスキーマを必要とする REST サービスにデータを送信する場合に特に便利です。

次のインターフェイスを検討してください:

<code class="typescript">interface MyInterface {
  test: string;
}</code>

および追加のプロパティを含む実装:

<code class="typescript">class MyTest implements MyInterface {
  test: string;
  newTest: string;
}</code>

この問題は、Angular の toJson メソッドを使用して、REST サービスに送信するために MyTest インスタンスをシリアル化しようとすると発生します。 toJson メソッドには、インターフェイスの一部ではない newTest プロパティが含まれています。これにより、サーバー側でエラーが発生する可能性があります。

この問題を解決するには、MyTest インスタンスに MyInterface インターフェイスで宣言されたプロパティのみが含まれるようにする方法を見つける必要があります。ただし、TypeScript のインターフェイスは本質的にランタイム表現を持たないプレースホルダーであるため、これを直接行うことはできません。

代わりに、回避策を採用できます。 1 つのアプローチは、インターフェイスをプロパティ初期化子を持つクラスとして定義することです。

<code class="typescript">class MyInterface {
  test: string = undefined;
}</code>

このクラスをインターフェイスとして使用すると、Lodash などのライブラリを使用して、インターフェイスに一致するプロパティのみを選択できます。

<code class="typescript">import _ from 'lodash';

const before = { test: "hello", newTest: "world"};
let reduced = new MyInterface();
_.assign(reduced , _.pick(before, _.keys(reduced)));
console.log('reduced', reduced); // { test: "hello" }</code>

このソリューションは、MyTest インスタンスを MyInterface インターフェースで宣言されたプロパティのみを含むように効果的に削減し、この課題に対するシンプルで実用的なソリューションを提供します。

以上がTypeScript のインターフェイス プロパティのみに JavaScript オブジェクトを減らすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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