Angular Material Table场景下Typescript interface如何动态增属性或创建

TypeScript 的 interface 是编译期静态语法，编译为 JavaScript 后会被完全清除，不会保留到运行时，因此无法在代码运行阶段动态创建或修改 interface。你的需求可以按照静态类型扩展、运行时动态数据适配两个场景分别处理。

静态扩展已有interface的方案 #

如果是开发阶段已知要新增的属性，可以用以下三种方式扩展：

• 方案1：接口自动合并
  TypeScript 支持同名接口自动合并属性，只要在同一作用域下重复声明同名 interface 即可，和你示例中的写法完全一致：

  // 原有定义
  export interface PeriodicElement {
    name: string;
    position: number;
    weight: number;
    symbol: string;
  }
  
  // 同作用域下二次声明，TS会自动合并两个接口的属性
  export interface PeriodicElement {
    index: number;
  }
  
  // 合并后 PeriodicElement 已包含全部5个属性
  

• 方案2：接口继承
  如果不想修改原有接口定义，可以继承原接口生成新的接口：

  export interface PeriodicElementWithIndex extends PeriodicElement {
    index: number;
  }
  

• 方案3：交叉类型
  不需要额外声明接口，直接用交叉类型组合属性：

  type PeriodicElementWithIndex = PeriodicElement & { index: number }
  

运行时适配后端未知结构数据的方案 #

如果后端返回数据结构完全不确定，需要动态新增任意属性，可以用以下方案处理：

• 方案1：给interface加索引签名
  允许接口包含任意string类型的键，不需要提前声明所有属性：

  export interface PeriodicElement {
    // 可保留已知的固定属性
    name?: string;
    position?: number;
    // 索引签名：允许任意字符串类型的key，值类型可根据业务调整为unknown或具体类型
    [key: string]: any;
  }
  

  声明后可以给该接口的实例动态新增index或其他后端返回的任意属性，不会触发类型报错。
• 方案2：直接使用动态类型
  如果不需要严格的类型校验，直接将MatTableDataSource的泛型指定为Record<string, any>即可，支持任意属性：

  dataSource: MatTableDataSource<Record<string, any>>;
  
  // 拿到后端数据后可以直接处理，比如新增index属性
  const fetchData = async () => {
    const rawData = await getBackendList();
    const tableData = rawData.map((item, index) => ({
      ...item,
      index: index + 1
    }));
    this.dataSource = new MatTableDataSource(tableData);
  }
  

• 额外说明：运行时 JavaScript 本身支持给对象动态新增属性，TS 的类型限制只在编译期生效，如果你不需要编译期的类型提示，甚至可以不用提前声明任何interface，直接处理后端返回的数据赋值给dataSource即可。

内容的提问来源于stack exchange，提问作者denisiulian