如何在TypeScript中创建动态类属性并保留类型提示？

问题1：动态添加属性/方法后类方法报错的处理 #

你的第一个示例中，TypeScript报错是因为编译器无法识别构造函数中动态添加的name和setName成员。直接用any断言会丢失智能提示，我们可以通过显式定义接口并让类实现接口的方式解决：

// 定义动态属性的类型接口
interface MyClassDynamicProps {
  name: string;
  setName: (value: string) => void;
}

class MyClass implements MyClassDynamicProps {
  // 声明接口要求的成员，让编译器知晓这些属性的存在
  name: string;
  setName: (value: string) => void;

  constructor() {
    const dynamicProperty: MyClassDynamicProps = {
      name: 'ujjwal gupta',
      setName(value) {
        this.name = value;
      }
    };

    // 用Object.assign替代循环，更简洁且类型安全
    Object.assign(this, dynamicProperty);
  }

  getName() {
    return this.name; // 无报错，且有完整的智能提示
  }
}

如果动态属性的结构不固定，也可以通过typeof推导类型，避免手动编写接口：

const dynamicProperty = {
  name: 'ujjwal gupta',
  setName(value: string) {
    this.name = value;
  }
};

// 自动推导动态属性的类型
type MyClassDynamicProps = typeof dynamicProperty;

class MyClass implements MyClassDynamicProps {
  name: string;
  setName: (value: string) => void;

  constructor() {
    Object.assign(this, dynamicProperty);
  }

  getName() {
    return this.name;
  }
}

问题2：基于states动态生成强类型的修改方法 #

对于你的业务场景，我们可以利用泛型+映射类型实现强类型的动态方法，既保留智能提示，又保证类型安全：

// 定义映射类型：将states的每个key转为对应的修改方法
type MutationMethods<T> = {
  [K in keyof T]: (value: T[K]) => void;
};

class MyMutation<T extends object> implements MutationMethods<T> {
  constructor(states: T) {
    for (const key in states) {
      // 过滤原型链上的属性，避免意外赋值
      if (Object.prototype.hasOwnProperty.call(states, key)) {
        this[key] = (value: T[typeof key]) => {
          states[key] = value;
        };
      }
    }
  }

  // 索引签名兼容动态赋值，外部使用时会被泛型类型覆盖，不影响智能提示
  [key: string]: any;
}

// 使用示例
const states = {
  name: 'ujjwal',
  age: 25
};

const mutation = new MyMutation(states);
mutation.name('new name'); // 智能提示：参数为string类型
mutation.age(30); // 智能提示：参数为number类型
// mutation.unknown('test'); // 编译器报错：不存在该方法

如果你不需要类结构，用工厂函数实现会更简洁，且无需索引签名：

type MutationMethods<T> = {
  [K in keyof T]: (value: T[K]) => void;
};

function createMutation<T extends object>(states: T): MutationMethods<T> {
  const mutation: Partial<MutationMethods<T>> = {};
  for (const key in states) {
    if (Object.prototype.hasOwnProperty.call(states, key)) {
      mutation[key] = (value: T[typeof key]) => {
        states[key] = value;
      };
    }
  }
  return mutation as MutationMethods<T>;
}

// 使用示例
const states = {
  name: 'ujjwal',
  age: 25
};

const mutation = createMutation(states);
mutation.name('Alice'); // 类型安全，智能提示正常

核心原理 #

TypeScript的静态类型检查依赖显式的类型声明，动态添加的成员默认不会被编译器识别。通过接口、泛型和映射类型，我们可以提前告知编译器类或对象的结构，从而在保留动态扩展能力的同时，获得完整的智能提示和类型校验。

内容的提问来源于stack exchange，提问作者Ujjwal Kumar Gupta