如何在JavaScript子类中扩展父类属性对象并让TypeScript不报错？

问题原因 #

你遇到的报错和运行结果不符合预期，本质是因为：

• TypeScript禁止通过super访问父类的类字段（即类中直接声明的data = {x:1}这类属性），因为类字段是绑定在实例上的，而super指向的是父类的原型对象，原型上不存在这个字段，所以super.data实际读取到的是undefined，最终导致子类的data只有y:1。

解决方案 #

方案一：在子类构造函数中扩展实例属性

这是最直观且符合实例初始化逻辑的方式：先调用super()完成父类实例的初始化（此时父类的data已经被赋值到当前实例），再基于this.data扩展新属性：

class Foo {
  data = { x: 1 };
}

class Bar extends Foo {
  constructor() {
    super();
    // 要么扩展现有对象，要么重新赋值为合并后的新对象
    this.data = { ...this.data, y: 1 };
  }
}

console.log(new Foo().data); // {x: 1}
console.log(new Bar().data); // {x: 1, y: 1}

这种方式下每个实例都拥有独立的data对象，TypeScript不会抛出错误，完全符合需求。

方案二：父类使用getter定义data（适合共享基础结构场景）

如果父类的data基础结构不需要随实例变化，可以将其定义为原型上的getter，这样super.data就能正确访问到父类的返回值：

class Foo {
  get data() {
    return { x: 1 };
  }
}

class Bar extends Foo {
  override get data() {
    return { ...super.data, y: 1 };
  }
}

console.log(new Foo().data); // {x: 1}
console.log(new Bar().data); // {x: 1, y: 1}

注意：这种方式每次访问data都会生成新对象，若需要实例级的可变数据，优先选择方案一。

方案三：父类在构造函数中初始化属性（与方案一逻辑一致）

如果习惯在构造函数中初始化属性，写法如下，效果和方案一完全相同：

class Foo {
  data: { x: number };
  constructor() {
    this.data = { x: 1 };
  }
}

class Bar extends Foo {
  constructor() {
    super();
    this.data = { ...this.data, y: 1 };
  }
}

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