将属性添加到接口打字稿

Question

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

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

如果我想在我的数据库中显示添加更多数据，我必须将这些数据点添加到这个接口，有没有办法动态创建接口，或者在组件构造函数中创建它？

Answer 1

您不能动态更改/创建接口，因为它只是一个静态值，用于 Typescript 编译器的结构类型检查。

但是，如果您需要该接口上的所有属性和一个附加属性，则可以执行以下操作：

使用extends

您还可以使用extends为这种特定情况创建一个新接口。

interface ExtendedUserData extends UserData {
 someOtherProperty: string
}

使用Intersection types

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

你可以这样输入。

fancyUserData: UserData & { extraProperty: string }

使用交叉点类型，您可以临时添加属性。

在 Angular 中的用法

为了在 Angular 中使用这些类型，您可以在组件上创建一个看起来像这样的泛型类型：

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

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

所以简而言之，不，你不能真正构建动态类型，而且绝对不能在组件的构造函数中。 但是，您可以根据需要使用我上面提到的方法来扩展和塑造您的界面。

Answer 2

要添加属性，您可以再次定义相同的接口并添加其他属性：

interface SquareConfig {
  color?: string;
  width?: number;
}

interface SquareConfig {
  name: string;
}

let c: SquareConfig = {name:'jack', color:'blue'}
console.log(c) // {"name": "jack", "color": "blue"}