打字稿继承：扩展基类对象属性

Question

当扩展一个类时，我可以很容易地向它添加一些新属性。

但是，当我扩展一个基类时，如果我想为基类的一个对象（一个简单对象的属性）添加新属性怎么办？

这是一个带有一些代码的示例。

基类

type HumanOptions = {
  alive: boolean
  age: number
}

class Human {
  id: string
  options: HumanOptions

  constructor() {
    this.id = '_' + Math.random()

    this.options = {
      alive: true,
      age: 25,
    }

  }
}

派生类

type WizardOptions = {
  hat: string
} & HumanOptions

class Wizard extends Human{
 
  manaLevel: number
  options: WizardOptions // ! Property 'options' has no initializer and is not definitely assigned in the constructor.

  constructor() {
    super()
    this.manaLevel = 100
    this.options.hat = "pointy" // ! Property 'options' is used before being assigned.
  }
}

现在，正如您从嵌入式 cmets 中看到的那样，这会激怒 TypeScript。 但这适用于 JavaScript。那么实现这一目标的正确 ts 方法是什么？如果没有，是我的代码模式本身的问题吗？什么模式适合这个问题？

也许你想知道为什么我想要options 对象中的这些属性。它可能非常有用！例如：只有options 中的属性可以通过某些UI 进行编辑。因此，其他一些代码可以在类中动态查找 options 并在 UI 上公开/更新它们，同时诸如 id 和 manaLevel 之类的属性将被单独保留。

注意

我知道我可以为向导做到这一点：

class Wizard extends Human{
 
  manaLevel: number

  options: {
    hat: string
    alive: boolean
    age: number
  }

  constructor() {
    super()
    this.manaLevel = 100
    this.options = {
      alive: true,
      age: 25,
      hat: "pointy"
    }
  }
}

而且它有效。但是代码不是很干，我必须手动管理选项继承（这在复杂的应用程序中并不理想）。

Answer 1

您的第二个错误是您在 Wizard 中声明的选项字段的结果隐藏您在 Human 中声明的选项字段。这就是大多数（所有）基于类的类型系统的工作方式，而不仅仅是 TS。因此Wizard.options 在this.options.hat = "pointy" 执行时是未定义的。你可以通过注释掉options: WizardOptions来看到这一点

这在 Javascript 中有效，因为您依赖于原型继承，并且没有在 Wizard 类中定义新的 options 字段（如果有的话，它也会隐藏 Human.options。

请参阅@jcalz's answer，了解我认为适合这种情况的最佳解决方案。

Answer 2

如果您只是要重用超类中的属性但将其视为更窄的类型，您可能应该use the declare property modifier in the subclass 而不是重新声明该字段：

class Wizard extends Human {
  manaLevel: number
  declare options: WizardOptions; // <-- declare
  constructor() {
    super()
    this.manaLevel = 100
    this.options.hat = "pointy" // <-- no problem now
  }
}

通过在此处使用declare，您可以抑制该行的任何 JavaScript 输出。它所做的只是告诉 TypeScript 编译器，在 Wizard 中，options 属性将被视为 WizardOptions 而不仅仅是 HumanOptions。

---

Public class fields 是 at Stage 4 的 TC39 process 并将成为 ES2022 (currently in draft at 2021-12-07) 的一部分。当这种情况发生时（或者可能是now if you have a new enough JS engine），您编写的代码最终会生成类似于

class Wizard extends Human {
    manaLevel;
    options; // <-- this will be here in JavaScript
    constructor() {
        super();
        this.manaLevel = 100;
        this.options.hat = "pointy";
    }
}

这只是没有类型注释的 TypeScript。 但是 JavaScript 中的 options 声明会将子类中的 options 初始化为 undefined。 因此，在分配之前使用 this.options 确实是正确的：

console.log(new Wizard()); // runtime error!
// this.options is undefined

所以你从 TypeScript 得到的错误是一个很好的错误。

---

最初 TypeScript 实现了类字段，因此如果你没有显式地初始化它，仅仅声明一个字段不会有效果。这就是 TypeScript 团队认为类字段最终将在 JavaScript 中实现的方式。但他们错了。如果您的编译器选项未启用--useDefineForClassFields（请注意，如果您使--target 足够新，它将自动包含在内；请参阅microsoft/TypeScript#45653），那么它将输出JS 代码，在您的示例中不会发生运行时错误。

所以你可以争辩说，如果你不使用--useDefineForClassFields，编译器不应该给你一个错误。在--useDefineForClassFields 存在之前，microsoft/TypeScript#20911 和microsoft/TypeScript#21175 居然有这样的说法。

但我认为 TS 团队不再接受这一点。随着时间的推移，JavaScript 中声明的类字段被初始化为undefined 将成为常态，而不是例外，并且支持旧的不合格版本的类字段并不是任何人的优先事项。请参阅microsoft/TypeScript#35831，其中建议基本上是“使用declare”。这也是我在这里的建议。

Playground link to code

Answer 3

您可以通过以下方式进行操作：playground

type HumanOptions = {
  alive: boolean
  age: number
}

class Human<Options extends HumanOptions> {
  id: string
  options: Options

  constructor() {
    this.id = '_' + Math.random()

    this.options = {
      alive: true,
      age: 25,
    } as Options
  }
}

type WizardOptions = {
  hat: string
} & HumanOptions

class Wizard extends Human<WizardOptions> {
  manaLevel: number

  constructor() {
    super()
    this.manaLevel = 100
    this.options.hat = "pointy"
  }
}

请注意，您全权负责设置options 的所有必需属性。