如何在TypeScript中动态创建类及为现有类添加JSON字段属性？

嘿，针对你提出的两个TypeScript动态处理类属性的问题，我来给你详细解答，附上具体的代码示例：

1. 如何在TypeScript中动态创建类并为其添加字段？ #

在TypeScript里动态创建类，我们可以结合类表达式和Object.assign来快速实现，同时兼顾类型安全，避免滥用any。这里有两种常见的写法：

基础版本（快速实现） #

function createDynamicClass(className: string, initialFields: Record<string, any>) {
  // 定义动态类的构造函数，初始化传入的字段
  const DynamicClass = class {
    constructor() {
      Object.assign(this, initialFields);
    }
  };

  // 给类设置名称，方便调试时识别
  Object.defineProperty(DynamicClass, 'name', { value: className });
  return DynamicClass;
}

// 用例：创建一个Person类，包含name和age字段
const Person = createDynamicClass('Person', { name: 'Alice', age: 30 });
const alice = new Person();
console.log(alice.name); // Alice
console.log(alice.age); // 30

类型安全版本（泛型加持） #

如果想要TypeScript能自动推断动态类的属性类型，可以用泛型来约束：

// 定义动态类的类型，约束它是一个可实例化的类
type DynamicClass<T> = new () => T;

function createDynamicClass<T extends Record<string, unknown>>(
  className: string,
  initialFields: T
): DynamicClass<T> {
  const DynamicClass = class {
    constructor() {
      Object.assign(this, initialFields);
    }
  } as DynamicClass<T>;

  Object.defineProperty(DynamicClass, 'name', { value: className });
  return DynamicClass;
}

// 用例：此时TypeScript能自动识别Person实例的属性类型
const Person = createDynamicClass('Person', { name: 'Bob', age: 28 });
const bob = new Person();
// 编辑器会自动提示name和age属性，而且类型正确
console.log(bob.name.toUpperCase()); // BOB

2. 给现有类添加JSON对象的键作为属性 #

针对你给出的User类示例，我们分两种场景处理：给单个实例添加属性，或者给整个类的所有实例添加共享属性。

场景1：给单个实例动态添加属性 #

如果只是希望当前实例拥有JSON里的额外属性，我们可以在构造函数里用Object.assign，同时添加索引签名让TypeScript允许动态属性：

class User {
  username: string;
  password: string;
  // 索引签名：允许类实例拥有任意字符串键的属性
  [key: string]: any;

  constructor(options: { username: string; password: string } & Record<string, any>) {
    this.username = options.username;
    this.password = options.password;
    // 将options里的所有键值对（包括额外的firstName）复制到实例
    Object.assign(this, options);
  }
}

// 用例：传入包含firstName的options
const user = new User({
  username: 'pragnya',
  password: 'secure123',
  firstName: 'Pragnya'
});

console.log(user.firstName); // Pragnya

场景2：给整个类的所有实例添加共享属性 #

如果希望所有User实例都拥有这个属性（比如默认值或者共享方法），可以直接修改类的原型：

class User {
  username: string;
  password: string;

  constructor(options: { username: string; password: string }) {
    this.username = options.username;
    this.password = options.password;
  }
}

// 工具函数：给类的原型添加属性
function addClassProperties<T>(cls: T, properties: Record<string, any>) {
  Object.assign(cls.prototype, properties);
}

// 用例：给User类添加firstName默认值和getFullName方法
addClassProperties(User, {
  firstName: 'DefaultName',
  getFullName() {
    return `${this.firstName} ${this.username}`;
  }
});

const user1 = new User({ username: 'john', password: '456' });
console.log(user1.firstName); // DefaultName
console.log(user1.getFullName()); // DefaultName john

更严谨的类型写法（避免any） #

如果不想用any，可以用泛型来明确动态属性的类型，让TypeScript提供完整的类型提示：

// 定义User的options类型，结合基础属性和动态属性
type UserOptions<T extends Record<string, unknown>> = {
  username: string;
  password: string;
} & T;

class User<T extends Record<string, unknown> = {}> {
  username: string;
  password: string;
  // 整合动态属性的类型
  [key: string]: T[keyof T] | string;

  constructor(options: UserOptions<T>) {
    this.username = options.username;
    this.password = options.password;
    Object.assign(this, options);
  }
}

// 用例：指定动态属性的类型为{ firstName: string }
const user = new User<{ firstName: string }>({
  username: 'doe',
  password: '789',
  firstName: 'John'
});

// 此时TypeScript能识别firstName是string类型，支持类型校验
console.log(user.firstName.length); // 4（不会报错）

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