Typescript继承：扩展基类对象属性

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.
  }
}

现在，正如您可以从行内注释中看到的，这将激怒TypeScript。但这在JavaScript中工作。那么，实现这一目标的正确方法是什么呢？如果没有，问题是在我的代码模式本身吗？什么模式适合这个问题？

也许您想知道为什么我要在options对象中使用这些属性。它可能非常有用！例如：只有选项中的属性才能通过某些UI进行编辑。因此，其他一些代码可以在类中动态查找选项，并在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中声明的选项字段的结果。

这在Javascript中起作用，因为您依赖于原型继承，并且没有在向导类中声明新的选项字段（如果有的话，该类也会隐藏Human.options）。

Answer 2

你可以用以下方法来做：操场

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"
  }
}

请注意，您完全负责设置选项的所有必需道具。

Answer 3

如果您只是要重用超类中的属性，但将其视为更窄的类型，您可能应该在子类中使用声明属性修饰符，而不是重新声明字段：

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编译器，在向导中，选项属性将被视为向导选项，而不仅仅是人类选项。

公共类字段目前处于TC39过程的第3阶段，因此很可能是当前形式的JavaScript的一部分，或者与之相近。当这种情况发生时（或者现在如果你有一个足够新的JS引擎的话），你编写的代码最终会生成如下的JavaScript

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。因此，在分配之前使用此选项将是正确的：

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

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

最初，TypeScript实现了类字段，因此如果不显式初始化字段，则仅声明字段不会产生效果。TypeScript团队认为类字段最终将在JavaScript中实现。但他们错了。如果您的编译器选项没有启用--使用定义或类字段（请注意，如果您将--目标设置得足够新，它将自动包括在内；请参见microsoft/TypeScript#45653），那么它将输出JS代码，而您的示例不会出现运行时错误。

因此，您可以争辩说，如果您没有使用--useDefeForClassFields，编译器不应该给您一个错误。在--use定义ForClassFields存在之前，这样的论点实际上是在微软/TypeScript#20911和微软/TypeScript#21175上提出的。

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

操场连结至守则