Mixed es5/es2015 code with mixin classes causes runtime errors

[kitsonk]

TypeScript Version: 2.4.1 (but likely anything since 2.2)

When utilising code targeted at ES5 mixed with code targeted at ES6 causes a runtime error when using mixin classes. The real world use case was using a library that was targeted at ES5 for distribution compatibility reasons while downstream code is being targeted at ES2017 because of running in a known limited environment.

Code

Tagged.ts

// @target: es5
export interface Constructor<T> {
    new(...args: any[]): T;
    prototype: T;
}

export default function Tagged<T extends Constructor<{}>>(Base: T) {
    return class extends Base {
        _tag = '';
    }
}

TaggedExample.ts

// @target: es2015
import Tagged from './Tagged';

class Example {
  log() {
    console.log('Hello World!');
  }
}

const TaggedExample = Tagged(Example);

const taggedExample = new TaggedExample(); // Uncaught TypeError: Class constructor Example cannot be invoked without 'new'

Expected behavior:

No run-time errors.

Actual behavior:

A runtime error of Uncaught TypeError: Class constructor Example cannot be invoked without 'new'.

[kitsonk]

I suspect this got lost in the shuffle. Ping @DanielRosenwasser

[kitsonk]

🎤 tap tap is this thing on? 😁

/cc @mhegazy

[DanielRosenwasser]

Hey @kitsonk, sorry we didn't catch this issue. I spoke about this with @rbuckton a quite a long time ago. Unfortunately I don't think that this is possible to achieve without Reflect.construct which isn't available in ES5 runtimes, but I will defer to Ron here.

[mhegazy]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.

[kitsonk]

@mhegazy the issue indicates that potentially a response from @rbuckton would help elucidate the issue. Can we keep it open or get a response?

[rbuckton]

We would need to add a helper to facilitate marshalling super() to Reflect.construct when available and falling back to our existing behavior otherwise. Something like this:

var __construct = (this && this.__construct) || (typeof Reflect !== "undefined" && Reflect.construct
    ? function (self, target, args) { return target !== null && Reflect.construct(target, args, self.constructor) || self; }
    : function (self, target, args) { return target !== null && target.apply(self, args) || self; });

Which would then be used like this:

function Tagged(Base) {
    return (function (_super) {
        __extends(class_1, _super);
        function class_1() {
            var _this = __construct(this, _super, arguments);
            _this._tag = '';
            return _this;
        }
        return class_1;
    }(Base));
}

[mgroenhoff]

We are currently running into this issue where we still emit most part of our codebase to es5 but only some are being migrated to es2015. Are there any plans to change the emitted es5 code like the example you posted? @rbuckton

[dpogue]

This continues to be an issue, making it impossible to subclass built-ins like Promises or EventTarget while targeting ES5 output

I've resorted to hand-transpiling some subclasses to use the __construct helper as posted above (and suggested in #15397), and it works as intended. Would be great to get this behaviour by default.