首页 >web前端 >js教程 >如何在 TypeScript 中将 JavaScript 对象减少为仅接口属性?

如何在 TypeScript 中将 JavaScript 对象减少为仅接口属性?

Patricia Arquette
Patricia Arquette原创
2024-10-31 06:12:01735浏览

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn