如何在 TypeScript 中將 JavaScript 物件減少為僅介面屬性？

將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 方法序列化MyTest 實例以傳送到REST 服務時，就會出現問題。 toJson 方法包含 newTest 屬性，該屬性不是介面的一部分。這可能會導致伺服器端出現錯誤。

要解決此問題，我們需要找到一種方法來減少 MyTest 實例，使其僅包含 MyInterface 介面中聲明的屬性。然而，這是不可能直接實現的，因為 TypeScript 中的介面本質上是沒有執行時間表示的佔位符。

相反，我們可以採取一種解法。一種方法是將介面定義為具有屬性初始值設定項的類別：

<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中文網其他相關文章！