CODEWITHSUNDEEP
statictypescriptecmascript-6
Mike Graham
Mike Graham

Reputation: 1044

TypeScript class: statics and inheritance

Questions:

  1. Is the behavior I'm observing the expected behavior for TypeScript?
  2. Is the behavior I'm observing the expected behavior for ECMAScript 6?
  3. 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"]

Upvotes: 4

Views: 535

Answers (2)

Mike Graham
Mike Graham

Reputation: 1044

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

Upvotes: 0

basarat
basarat

Reputation: 276289

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.

Upvotes: 1

Related Questions