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

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

TypeScript では、インターフェイスはデータ構造の設計図として機能します。ただし、実行時はインターフェイスが空であるため、定義されたプロパティのみを含むようにオブジェクトを直接縮小することはできません。

実装

ただし、いくつかの回避策があります。メソッド:

クラスの使用

代わりにインターフェイスをクラスとして定義します:

class MyInterface {
  test: string = undefined;
}

次に、Lodash を使用して必要なプロパティを抽出します。

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

アセンブリ オペレータ

または、アセンブリ オペレータを使用することもできます。

let reduced = {...new MyInterface(), ...test};

これは、空の "MyInterface" オブジェクトをマージします。 "test" オブジェクトを使用して、重複するプロパティを上書きします。

このメソッドを使用する理由

このアプローチは、Angular の "toJson" を使用して REST サービスにデータを送信する場合に便利です。方法。 「newTest」プロパティはコンパイル中にアクセスできませんが、「toJson」によって変換されるため、REST サービスは無効なプロパティのために JSON を拒否します。オブジェクトをインターフェイス プロパティに減らすことで、予期されるデータのみが送信され、サービスとの適切な通信が確保されます。

以上がJavaScript オブジェクトを TypeScript のインターフェイス プロパティに縮小する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。