首頁 > web前端 > js教程 > 如何在 TypeScript 中將 JavaScript 物件減少為僅介面屬性?

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

Patricia Arquette
發布: 2024-10-31 06:12:01
原創
779 人瀏覽過

How to Reduce JavaScript Objects to Only Interface Properties in TypeScript?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板