TypeScript class: statics and inheritance

Question

Questions:

Is the behavior I'm observing the expected behavior for TypeScript?
Is the behavior I'm observing the expected behavior for ECMAScript 6?
Is there an easy way to walk back through the inheritance hierarchy to process the 'myStatic' array for each level? How do I know when to stop?

Description: When using TypeScript, there appears to be some interesting behavior with derived classes and static properties.

TypeScript Example

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/>";

This is the result:

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

Edit: Adding example that illustrates different behavior between TypeScript and ECMA Script 6. Note: ECMA Script doesn't support static properties, so these examples use static methods.

TypeScript Code:

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 Results:

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 Results

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

basarat · Accepted Answer · 2015-01-04 22:44:26Z

1

Is the behavior I'm observing the expected behavior for TypeScript? Is the behavior I'm observing the expected behavior for ECMA Script 6?

Yes and yes. Classes allow runtime modification and processed in order of definition. inherit only kicks in at the point of definition so depends upon the properties of the base at that point.

answered Jan 4, 2015 at 22:44

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Graham · Accepted Answer · 2015-01-06 12:10:25Z

See related TypeScript bug report

Here are TypeScript and ES6 code samples that have consistent behavior and walk the inheritance hierarchy:

TypeScript Code:

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 Result:

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

ES6 Code: 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 Result

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

Collectives™ on Stack Overflow

TypeScript class: statics and inheritance

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related