Allow subclass constructors without super() call

[justinfagnani]

TypeScript Version:

1.8.0

Code

Custom element classes often have constructors that just return document.createElement(), since HTMLElement doesn't have a callable constructor, but this generates an error in TypeScript:

class MyElement extends HTMLElement {
  constructor() {
    return document.createElement('my-element');
  }
}

In general, it is completely valid ES2015 to not call super(), as long as you don't access this.

[nippur72]

Something similar was discussed in #5910

[xLama]

I know this is a very ugly solution but It works.

class MyElement extends HTMLElement {

    constructor() {
        try{
            super();
        }catch(e){
        }finally{
            return document.createElement('my-element');
        }
    }
}

Or without catch

class MyElement extends HTMLElement {

    constructor() {
        try{
            super();
        }finally{
            return document.createElement('my-element');
        }
    }
}

class MyElement extends HTMLElement {
    constructor(element : string) {
        try{
            super();
        }finally{
            return document.createElement(element);
        }
    }
}

alert(new MyElement("div"));

[justinfagnani]

Apparently TS's super() check isn't too robust, so I just did this:

constructor() {
  if (1 < 0) { // edit, this used to be 1 < 0, @xLama is right :)
    super();
  }
  return document.createElement('my-element');
}

[xLama]

I think it dows not work because it call super constructor. 1 is always greater than 0. Maybe you wanted to write 1 < 0.

I think that code will beacome deprecated when unreachable code detection improves.

this does not work

class MyElement extends HTMLElement {
    constructor() {
        if (false){
          super();
        }
        return document.createElement();
    }
}

this it does

class MyElement extends HTMLElement {
    constructor() {
        if (0){
          super();
        }
        return document.createElement();
    }
}

[justinfagnani]

Oops, I meant the other way! Editing...

[justinfagnani]

@xLama there will always be some way to beat compile-time evaluation... it'll just get uglier over time.

[RyanCavanaugh]

What's the use of a class like this? Why not just have a factory function?

It seems crazy to have MyElement such that (new MyElement()) instanceof MyElement is false

[justinfagnani]

(new MyElement()) instanceof MyElement will be true. document.createElement('my-element') will create an instance of MyElement.

The use, in this case, is that users want constructors, even before the built-in HTMLElement subclasses get callable constructors.

In other cases, a constructor could return a subtype, or return a cached instance.

[RyanCavanaugh]

That's not what I'm seeing in Firefox nightly -- maybe a bug on their side?

[justinfagnani]

Firefox custom element support is behind a flag. You need to enable dom.webcomponents.enabled in about:config. Or try on Chrome.

[justinfagnani]

Here's an example that works in Chrome: http://jsbin.com/xivutarobo/edit?html,console,output

With polyfills is also works on other browsers without flags.

[justinfagnani]

Adding the code here, for convenience:

    class MyElement extends HTMLElement {
      constructor() {
        return document.createElement('my-element');
      }

      createdCallback() {
        console.log('created my-element');
      }
    }
    document.registerElement('my-element', MyElement);
    let el = new MyElement();
    console.log(el instanceof MyElement); // true

[justinfagnani]

Is more info still needed, or was this enough?