如何在TypeScript中为接口动态添加属性？

TypeScript无法直接通过泛型操作修改已定义的接口，但可以通过类型工具生成包含新增字段的目标类型，或者结合静态声明合并达到类似效果，以下是具体实现方式：

方案1：用泛型工具类型生成扩展后的类型 #

定义一个Add泛型类型，通过交叉类型将原类型与新增字段合并，实现动态扩展：

// 定义Add工具类型，接受原类型、字段名、字段类型
type Add<T, K extends string, V> = T & { [P in K]: V };

// 原空接口
interface Container {}

// 逐步扩展类型
type ContainerWithName = Add<Container, "name", string>;
type FinalContainer = Add<ContainerWithName, "age", number>;

// 使用示例
const user: FinalContainer = {
  name: "张三",
  age: 30
};

方案2：静态声明合并（直接扩展接口） #

如果不需要泛型动态扩展的语法，直接通过TypeScript的接口声明合并特性，就能让Container接口逐步包含目标字段：

// 初始空接口
interface Container {}

// 声明合并添加name字段
interface Container {
  name: string;
}

// 声明合并添加age字段
interface Container {
  age: number;
}

// 此时Container已包含name和age
const user: Container = {
  name: "李四",
  age: 28
};

说明 #

• 泛型Add方式适合需要动态根据参数生成类型的场景，最终得到的是新类型而非修改原接口；
• 声明合并是TypeScript的原生特性，直接扩展原接口，但只能静态编写，无法通过泛型参数动态添加字段。

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