如何確保 JavaScript 物件僅包含 TypeScript 中的介面屬性？

將 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 中，這可能會導致以下問題

解決方案11 ：解決方法

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：介面輔助函數

另一種方法是建立根據介面驗證物件的輔助函數。例如：

<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 函數的開銷。

以上是如何確保 JavaScript 物件僅包含 TypeScript 中的介面屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！