TypeScript 类：静态属性和继承

Question

问题:

1. 我观察到的行为是否符合TypeScript的预期行为？
2. 我观察到的行为是否符合ECMAScript 6的预期行为？
3. 有没有一种简单的方法可以沿继承层次结构向后遍历，以处理每个级别的“myStatic”数组？我如何知道何时停止？

描述：在使用TypeScript时，派生类和静态属性之间似乎存在一些有趣的行为。

TypeScript示例

class MyBase {
    static myStatic = [];
}

class MyDerived extends MyBase {}

MyBase.myStatic = ['one', 'two', 'three']

class MyDerived2 extends MyBase {}

document.body.innerHTML += "<b>MyDerived.myStatic:</b>&nbsp;" + JSON.stringify(MyDerived.myStatic) + "<br/>";
document.body.innerHTML += "<b>MyDerived2.myStatic:</b>&nbsp;" + JSON.stringify(MyDerived2.myStatic) + "<br/>";

这是结果：

MyDerived.myStatic: []
MyDerived2.myStatic: ["one","two","three"]

编辑：添加一个例子以说明TypeScript和ECMA Script 6之间不同的行为。注意：ECMA Script不支持静态属性，因此这些示例使用静态方法。

TypeScript代码：

class MyBase {
  static myStatic() { return []; }
}

class MyDerived extends MyBase {}

MyBase.myStatic = () => { return ['one', 'two', 'three']; }

class MyDerived2 extends MyBase {}

document.body.innerHTML += "<b>MyDerived.myStatic:</b>&nbsp;" + JSON.stringify(MyDerived.myStatic()) + "<br/>";
document.body.innerHTML += "<b>MyDerived2.myStatic:</b>&nbsp;" + JSON.stringify(MyDerived2.myStatic()) + "<br/>";

TypeScript结果：

MyDerived.myStatic: []
MyDerived2.myStatic: ["one","two","three"]

ECMA Script 6 Code: ES6 Fiddle

class MyBase {
  static myStatic() { return []; }
}

class MyDerived extends MyBase {}

MyBase.myStatic = () => { return ['one', 'two', 'three']; };

class MyDerived2 extends MyBase {}

console.log("MyDerived.myStatic: " + JSON.stringify(MyDerived.myStatic()));
console.log("MyDerived2.myStatic: " + JSON.stringify(MyDerived2.myStatic()));

ECMA Script 6 的结果

MyDerived.myStatic: ["one","two","three"]
MyDerived2.myStatic: ["one","two","three"]

- Mike Graham

Answer 1

我观察到的行为是TypeScript的预期行为吗？ 我观察到的行为是ECMA Script 6的预期行为吗？

是的，两者都是。类允许运行时修改并按定义顺序处理。 inherit仅在定义点生效，因此取决于该基础的属性在那一点。

- basarat

Answer 2

查看相关的TypeScript错误报告

以下是具有一致行为并遍历继承层次结构的TypeScript和ES6代码示例：

TypeScript代码：

class MyBase {
  static myStatic() { return []; }
}

class MyDerived extends MyBase {
  static myStatic() { return ['mickey', 'goofy', super.myStatic()]; }
}

MyBase.myStatic = () => { return ['one', 'two', 'three']; };

class MyDerived2 extends MyBase {
  static myStatic() { return ['mickey', 'goofy', super.myStatic()]; }
}

document.body.innerHTML += ("MyDerived.myStatic: " + JSON.stringify(MyDerived.myStatic()) + "<br/>");
document.body.innerHTML += ("MyDerived2.myStatic: " + JSON.stringify(MyDerived2.myStatic()) + "<br/>");

TypeScript 结果：

MyDerived.myStatic: ["mickey","goofy",["one","two","three"]]
MyDerived2.myStatic: ["mickey","goofy",["one","two","three"]]

ES6 代码：ES6 Fiddle

class MyBase {
  static myStatic() { return []; }
}

class MyDerived extends MyBase {
  static myStatic() { return ['mickey', 'goofy', super.myStatic()]; }
}

MyBase.myStatic = () => { return ['one', 'two', 'three']; };

class MyDerived2 extends MyBase {
  static myStatic() { return ['mickey', 'goofy', super.myStatic()]; }
}

console.log("MyDerived.myStatic: " + JSON.stringify(MyDerived.myStatic()));
console.log("MyDerived2.myStatic: " + JSON.stringify(MyDerived2.myStatic()));

ES6 结果

MyDerived.myStatic: ["mickey","goofy",["one","two","three"]]
MyDerived2.myStatic: ["mickey","goofy",["one","two","three"]]

- Mike Graham