Typescript 接口 - 动态添加新值或动态创建接口答案

【问题标题】：Typescript interface - add new value dynamically or create the interface dynamicallyTypescript 接口 - 动态添加新值或动态创建接口
【发布时间】：2021-11-10 04:42:53
【问题描述】：

我有一个 Angular 材质表。显然，我有一个接口，从中为表创建了数据源。是否有可能在界面中动态添加新值或者至少动态创建界面？因为来自后端的数据是未知的。示例：来自：

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

到这里：

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  index: number;
}

或从这里：

export interface PeriodicElement {}

到这里：

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  index: number;
}

【问题讨论】：

hhhmmm 如果它的界面几乎相同但存在不同数量的字段，您可以使用 DataSource>(elements)

标签： javascript angular typescript interface angular-material

【解决方案1】：

这样用会更好，

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  [key: string]: string | number;
}

或者只是

export interface PeriodicElement {
  [key: string]: string | number;
}

否则您可以创建单独的模型并使用union(|) 运算符。
您也可以使用Partials 来实现此目的。
用于动态创建Refer here

【讨论】：