Return value of super() calls not used for `this`

[justinfagnani]

If a constructor returns a value other than this, then in subclasses super() calls to that constructor should use the result as this in the subclass constructor.

I believe this is specified in 12.3.5.1, step 10 of SuperCall: http://www.ecma-international.org/ecma-262/6.0/index.html#sec-super-keyword

Getting this behavior correct is going to be very important for supporting Custom Elements, which takes advantage of this to initialize browser-allocated elements with user-written constructors. See https://w3c.github.io/webcomponents/spec/custom/#htmlelement-constructor

Note, Babel 6 implements this correctly.

TypeScript Version:

1.8.9

Code

class Foo {

 x : number;

 constructor() {
 return {
 x: 1,
 };
 }
}

class Bar extends Foo {

 y : number;

 constructor() {
 super();
 this.y = 2;
 }
}

let o = new Bar();
console.assert(o.x === 1 && o.y === 2);

Expected behavior:

No assertion error

The constructor for Bar should compile to this:

var Bar = (function (_super) {
 __extends(Bar, _super);
 function Bar() {
 var _this = _super.call(this);
 _this.x = 1;
 return _this;
 }
 return Bar;
}(Foo));

Actual behavior:

Assertion error

The constructor for Bar compiles to this:

var Bar = (function (_super) {
 __extends(Bar, _super);
 function Bar() {
 _super.call(this);
 this.x = 1;
 }
 return Bar;
}(Foo));

[justinfagnani]

Looking at the Typescript spec, it seems like there's an explicit incompatibility between section 4.9.1 and ECMA-262 12.3.5.1

Specifically the line "The type of a super call expression is Void": https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#4.9.1

[jeffreymorlan]

If you return an object from a constructor like that, you're throwing away the subclass prototype. So it doesn't make sense to make a super() call to such a constructor - if it worked you'd end up with new Bar() creating an object that doesn't have any methods of Bar.

[justinfagnani]

if it worked you'd end up with new Bar() creating an object that doesn't have any methods of Bar.

Jeff McAffer (@jeffmcaffer) This isn't necessarily true, new Bar() can return a Bar even if it's not returning this. It can easily type check - this has nothing to do with types. The return type of super() should be the return type of new in the super constructors interface.

For instance, this should fully type check:

class A {
 static _singleton : A;
 constructor() : A {
 if (!_singleton) {
 _singleton = this;
 }
 return _singleton;
 }
}

Mohamed Hegazy (@mhegazy) I'd like to point out that Typescript is in direct violation of the ECMAScript spec, and because of this you won't be able to write Custom Elements in Typescript compiled to ES5*. I hope that if this behavior is "By Design" that the design can still be changed so that Typescript correctly implements ES2016 and is actually a superset rather a separate language.

*Targeting ES2015 should probably work, because ES2015 just works this way.

[mhegazy]

and because of this you won't be able to write Custom Elements in Typescript compiled to ES5*.

can you elaborate?

[justinfagnani]

Here's the spec for the callable HTMLElement constructor: https://w3c.github.io/webcomponents/spec/custom/#htmlelement-constructor

The relevant parts are step 5-10

1. Let instance be...
2. Return instance

The native implementations of Custom Elements will return something that needs to become this from the HTMLElement constructor.

Separately, the initial polyfill code I'm writing looks something like this:

 window.HTMLElement = function() {
 if (_newInstance) {
 var i = _newInstance;
 _newInstance = null;
 _newTagName = null;
 return i;
 }
 var tagName = // some stuff to emulate new.target
 return document.createElement(tagName);
 }

(actual code here: https://github.com/webcomponents/webcomponentsjs/blob/v1/src/CustomElements/v1/CustomElements.js#L48 )

Test of Typescript ES5 output that fails: https://github.com/webcomponents/webcomponentsjs/blob/v1/tests/CustomElements/v1/js/typescript.js#L15

Corresponding test of Babel output that passes: https://github.com/webcomponents/webcomponentsjs/blob/v1/tests/CustomElements/v1/js/babel.js#L15

[sebmck]

Compiling to var _this = _super.call(this); isn't exactly accurate. Note step 13.a of 9.2.2. The return value of the constructor is only used if the returning value is an ECMAScript object.

[falsandtru]

Simplified another case:

new class extends class {
 constructor() {
 return function () {};
 }
} {
 constructor() {
 super();
 }
}

This code returns a function on chrome, firefox, and edge, but TypeScript is not.

[justinfagnani]

Any news here? Chrome, Safari, and the Web Components polyfills are all making progress on implementing custom elements v1 APIs, which rely on spec-compliant SuperCall behavior.