如何确保 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 中，这可能会导致以下问题

解决方案 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：接口辅助函数

另一种方法是创建根据接口验证对象的辅助函数。例如：

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