ホームページ > ウェブフロントエンド > jsチュートリアル > angular.toJson を介してオブジェクトを渡すときに、そのインターフェイスで定義されたプロパティのみがオブジェクトに含まれるようにするにはどうすればよいでしょうか?

angular.toJson を介してオブジェクトを渡すときに、そのインターフェイスで定義されたプロパティのみがオブジェクトに含まれるようにするにはどうすればよいでしょうか?

Mary-Kate Olsen
リリース: 2024-10-31 16:28:02
オリジナル
245 人が閲覧しました

How can we ensure that an object only contains properties defined in its interface when passing it through angular.toJson?

オブジェクトのインターフェイスへの準拠の確保: 無関係なプロパティの削除

TypeScript インターフェイスは、クラスまたはオブジェクトのコントラクト仕様を定義します。ただし、実装中に、インターフェイスで定義されているプロパティを超えて追加のプロパティが追加される可能性があり、不整合が発生する可能性があります。この問題に対処することは、特に RESTful 通信のために angular.toJson を介して縮小オブジェクトを渡す場合に重要になります。

単一のプロパティ テストを持つインターフェイス MyInterface を検討してください。

<code class="typescript">interface MyInterface {
  test: string;
}</code>
ログイン後にコピー

そして、追加のプロパティを備えたその実装property newTest:

<code class="typescript">class MyTest implements MyInterface {
  test: string;
  newTest: string;
}</code>
ログイン後にコピー

質問:

MyTest のようなオブジェクトから割り当てられた場合、縮小されたオブジェクトに MyInterface で宣言されたプロパティのみが含まれるようにするにはどうすればよいですかnewTest は除きますか?

答え:

残念ながら、インターフェイス定義のみに基づいて、実行時にオブジェクトから無関係なプロパティを直接削除することは現実的ではありません。 TypeScript のインターフェイスはデザイン時の構成として機能し、そのプロパティは実行時にすぐには利用できません。

提案される可能性のある解決策の 1 つは、「インターフェイス」をクラスとして定義し、それによって実行時の実装を提供することです。これにより、Lodash を活用して入力オブジェクトから必要なプロパティのみを選択できるようになります。

<code class="typescript">class MyInterface {
  test: string = undefined;
}</code>
ログイン後にコピー
<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)//contains only 'test' property</code>
ログイン後にコピー

このメソッドを採用することで、指定されたプロパティを効果的に抽出し、インターフェイスに準拠したオブジェクトを作成できます。契約しており、angular.toJson 経由でシリアル化する準備ができています。

以上がangular.toJson を介してオブジェクトを渡すときに、そのインターフェイスで定義されたプロパティのみがオブジェクトに含まれるようにするにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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