如何优雅处理TypeScript中Record的动态类型绑定问题？

问题根源 #

你构造函数里的data类型定义错误：Record<string, DataInterface>表示每个键对应的值都是完整的DataInterface对象，但你实际需要的是data的结构和DataInterface完全一致——每个键对应的值类型和接口里的对应键类型匹配。这就是类型不匹配错误的核心原因。

优雅解决方式（适配大量属性场景） #

方式1：复用接口类型 + 批量赋值

让类实现DataInterface确保属性一致性，再用Object.assign批量赋值，彻底避免手动逐个编写属性赋值代码：

interface DataInterface {
    bar: number;
    foo: string;
    fooBar: boolean;
    // 可直接添加更多属性，无需修改构造函数逻辑
}

export class MyClass implements DataInterface {
  // 实现接口后，TypeScript会自动校验属性类型与存在性，TS 3.7+版本可省略重复的属性声明
  public bar: number;
  public foo: string;
  public fooBar: boolean;

  constructor(data: DataInterface) {
    // 批量赋值所有属性，属性再多也只需一行代码
    Object.assign(this, data);
  }
}

若使用TS 3.7及以上版本，甚至可以直接省略类内的属性声明，implements DataInterface会自动帮你推断属性类型：

interface DataInterface {
    bar: number;
    foo: string;
    fooBar: boolean;
}

export class MyClass implements DataInterface {
  constructor(data: DataInterface) {
    Object.assign(this, data);
  }
}

方式2：类型映射（适配灵活场景）

如果需要对输入数据做部分属性筛选或类型调整，可以用Pick、Omit等工具类型配合类型映射：

interface DataInterface {
    bar: number;
    foo: string;
    fooBar: boolean;
}

// 只选取DataInterface中的部分属性作为类的输入类型
type MyClassInput = Pick<DataInterface, 'bar' | 'foo'>;

export class MyClass {
  public bar: number;
  public foo: string;
  public fooBar: boolean = false; // 给未传入的属性设置默认值

  constructor(data: MyClassInput) {
    Object.assign(this, data);
  }
}

关键提醒 #

• 不要用Record<string, T>描述结构固定的对象，它更适合键名不确定、值类型统一的字典结构。
• 当类的属性与某个接口完全一致时，用implements复用接口是最简洁的方案，既能自动做类型校验，又能避免重复定义属性。

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