angular – 将属性添加到接口typescript

发布时间：2020-12-17 17:55:11 所属栏目：安全来源：网络整理

导读：所以我正在开发一个Angular项目,并创建了这个界面,以便能够显示一些数据： export interface UserData { name: string,vorname: string,strasse: string,plz: string,ort: string,handynummer: string,telefonnummer: string,} 如果我想显示在我的数据库中添

所以我正在开发一个Angular项目,并创建了这个界面,以便能够显示一些数据：

export interface UserData {
  name: string,vorname: string,strasse: string,plz: string,ort: string,handynummer: string,telefonnummer: string,}

如果我想显示在我的数据库中添加更多数据,我将不得不将这些数据点添加到此接口,有没有办法动态创建接口,或在组件构造器中创建它？

解决方法

您无法动态更改/创建接口,因为它只是一个静态值,用于由Typescript编译器进行结构类型检查.

但是,如果您需要该接口上的所有属性和其他属性,则可以执行以下操作：

使用扩展

在组件上创建一个通用类型,如下所示：

@Component({
  selector: 'example'
  template: `<h1>example</h1>`
})
export class ExampleComponent<T extends UserData> {}

现在,您可以拥有类型为T且必须具有所有UserData属性的数据,然后添加您想要的任何其他属性.

您还可以使用extends为此特定情况创建新界面.

interface ExtendedUserData extends UserData {
 someOtherProperty: string
}

使用Intersection types

这可能接近您正在寻找的那种“动态”行为.假设您有一个属性,该属性需要是具有UserData的所有属性和附加extraProperty的对象.

你可以这样打字.

fancyUserData: UserData & { extraProperty: string }

使用交集类型,您可以临时添加属性.

简而言之,没有你不能真正构建动态类型,绝对不能在组件的构造函数中.但是,您可以使用我上面提到的方法根据需要扩展和模制您的接口.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!