TypeScript の JavaScript オブジェクトにインターフェイス プロパティのみが含まれていることを確認する方法

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

TypeScript インターフェイスはオブジェクトのコントラクトを定義し、型の安全性を確保します。ただし、オブジェクトにインターフェイスで指定されたプロパティのみが含まれていることを確認する必要がある場合があります。

問題:

次の TypeScript コードを考えてみましょう:

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

class MyTest implements MyInterface {
  test: string;
  newTest: string;
}

const test: MyTest = { test: "hello", newTest: "world" };
const reduced: MyInterface = test; // reduced still contains "newTest"</code>

これはなぜ問題があるのですか?

REST 呼び出しを行う前に Angular の toJson メソッドを使用すると、追加のプロパティ (newTest) が JSON に含まれるため、次の問題が発生する可能性があります。

解決策 1: 回避策

James Moey が洗練された回避策を提供しています。代わりにインターフェイスをクラスとして宣言し、Lodash を使用してインターフェイスのプロパティのみを選択します。オブジェクトから:

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

import _ from 'lodash';
let reduced = new MyInterface();
_.assign(reduced, _.pick(before, _.keys(reduced)));</code>

このソリューションにより、型安全性を維持しながら、結果として得られるオブジェクトがインターフェイス プロパティのみを持つようにすることができます。

解決策 2: インターフェイス ヘルパー関数

もう 1 つのアプローチは、インターフェイスに対してオブジェクトを検証するヘルパー関数を作成することです。例:

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

function reduceObject(obj: any, targetInterface: any): MyInterface {
  const reduced = {};
  Object.keys(targetInterface).forEach((key) => {
    if (obj[key] !== undefined) {
      reduced[key] = obj[key];
    }
  });
  return reduced;
}

const test: MyTest = { test: "hello", newTest: "world" };
const reduced: MyInterface = reduceObject(test, MyInterface);</code>

このアプローチでは、ループ イントロスペクションを使用してインターフェイスに対してオブジェクトを検証し、Lodash の pick 関数のオーバーヘッドを回避します。

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