Extending Request in typescript compiles to ES5 with TypeError

Question

I'm trying to extend Request class in Typescript as follows:

export class ApiRequest extends Request {
    static userAgentHeader: string = '';
    static xUserAgentHeader: string = '';

    public body: string;

    constructor(url: string, initialData?: any) {
        super(url, initialData);

        if (this.method !== 'GET') {
            this.body = initialData._bodyText;
        }

        this.headers.set('User-Agent', ApiRequest.userAgentHeader);
        this.headers.set('X-User-Agent', ApiRequest.xUserAgentHeader);
    }

    static setAgentHeader(userAgentHeader: string) {
        ApiRequest.userAgentHeader = userAgentHeader;
    }

    static setXUserAgentHeader(xUserAgentHeader: string) {
        ApiRequest.xUserAgentHeader = xUserAgentHeader;
    }
}

However when transpilling to ES5 I'm getting following piece of code:

import * as tslib_1 from "tslib";
var ApiRequest = /** @class */ (function (_super) {
    tslib_1.__extends(ApiRequest, _super);
    function ApiRequest(url, initialData) {
        var _this = _super.call(this, url, initialData) || this;
        if (_this.method !== 'GET') {
            _this.body = initialData._bodyText;
        }
        _this.headers.set('User-Agent', ApiRequest.userAgentHeader);
        _this.headers.set('X-User-Agent', ApiRequest.xUserAgentHeader);
        return _this;
    }
    ApiRequest.setAgentHeader = function (userAgentHeader) {
        ApiRequest.userAgentHeader = userAgentHeader;
    };
    ApiRequest.setXUserAgentHeader = function (xUserAgentHeader) {
        ApiRequest.xUserAgentHeader = xUserAgentHeader;
    };
    ApiRequest.userAgentHeader = '';
    ApiRequest.xUserAgentHeader = '';
    return ApiRequest;
}(Request));
export { ApiRequest };
//# sourceMappingURL=ApiRequest.js.map

The problem appears when trying to create ApiRequest object by calling new ApiRequest(url), Uncaught TypeError is thrown with the following message:

Uncaught TypeError: Failed to construct 'Request': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at eval (eval at ApiRequest (ApiRequest.js:5), :1:1)

It appears that Request must not be called without new keyword, but the transpilled code does just that on line 5 (_super.call()).

Is there a way to get this working somehow?

score 0 · Answer 1 · answered Apr 25 '18 at 09:28

The solution that finally worked is to wrap Request with a class-like function:

export const RequestWrapper: RequestWrapper = function(url: string, initialData?: any) {
    return new Request(url, initialData);
} as any;

export interface RequestWrapper extends Request {
    (url: string, initialData?: any): Request;
    new (url: string, initialData?: any): Request;
}

Then just extend RequestWrapper rather than Request:

export class ApiRequest extends RequestWrapper {
    ...
}

Extending Request in typescript compiles to ES5 with TypeError

1 Answers1