CODEWITHSUNDEEP
javascriptnode.jsinheritancetypescriptextends
Vadorequest
Vadorequest

Reputation: 17999

Inheritance with TypeScript doesn't works browser side

Previous discussion about this: Inheritance TypeScript with exported class and modules

This is the source generated from the ValidatorMessage.class.ts:

///<reference path='./def/lib.d.ts'/>
///<reference path='./def/node.d.ts'/>
var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var message = require("./Message.class");

var ValidatorMessage = (function (_super) {
    __extends(ValidatorMessage, _super);
    function ValidatorMessage() {
        _super.apply(this, arguments);
    }
    return ValidatorMessage;
})(message.Message);
exports.ValidatorMessage = ValidatorMessage;

But when I load it on the browser (After Grunt.js merging and minifying), I get this error:

Uncaught TypeError: Cannot read property 'prototype' of undefined

Just after the line:

__.prototype = b.prototype, d.prototype = new __();

(~ligne 6 & 7)

I don't understand this error. Even if I put only the source code generated from TS without Grunt I get the same error.

Edit:

console.log(message):

function Message(message, data, status) {
        "undefined" == typeof data && (data = !1), "undefined" == typeof status && (status = !1), 
        /**
        * Constants.
        */
        this.FIELD_NAME_MESSAGE = "m", this.FIELD_NAME_DATA = "d", this.FIELD_NAME_STATUS = "s", 
        this.EXCEPTION_BAD_JSON_CONTENT = 'Unable to parse JSON. Bad object/string attributes. (Missing message ("' + this.FIELD_NAME_MESSAGE + '" field) or status ("' + this.FIELD_NAME_MESSAGE + '" field)?', 
        this.EXCEPTION_BAD_JSON_TYPE = "Incorrect data type. Object or string expected.", 
        this._message = message, this._data = data, this._status = status;
    }

Upvotes: 1

Views: 1530

Answers (3)

Vadorequest
Vadorequest

Reputation: 17999

I resolved this issue two years ago.

It was because my ValidatorMessage was inherhiting my Message class, but the load order was wrong.

I was using CommonJS (and still do, AMD sucks IMO by making everything async and force to use extra tooling like requireJS, and if you want to share source code on the server and the browser, better not to use AMD, because it's really not good on Node.) which is for Node, but also browser-complient (if you load the files in the right order...)

Using WebStorm IDE, I first solved the issue about compiling for both AMD and CommonJS by having two "Watch task", one for CommonJS and one for AMD, with a different set of files. But later I started to use grunt-ts as @basarat stated, which did the trick.

If you're reading this now, I would advise not to use the IDE watchers, but rather use grunt-ts and [tsconfig.json][1] file. It's the best/cleanest solution I found. grunt-ts does the compilation job well, by following the and the rules on the tsconfig file. (file order, target, etc.)

Original answer:

I wrote a documentation for WebStorm IDE (7.0), probably the same with 6.x and next versions.

If you're not using WebStorm, you're probably using TypeScript with Visual Studio, I hope there is some plugin to do the same thing. Should exist. If you're not using VS, you should definitively use WebStorm as IDE, the best I ever used.

This document show how I solved my issue, by compiling for two different targets.

Configure WebStorm to compile for AMD and CommonJs: (dead link) https://mega.co.nz/#!4Y8jkSwJ!BGWr2FROWYaqwdyQ4aRNczEF4bN37-EB1sO1LdVVux4

Upvotes: 1

HMR
HMR

Reputation: 39250

Strange that typescript would compile it this way because it seems to pass ValidatorMessage to extend before it's even set relying on variable hoisting to make it work, this is normally considored bad practice. A better way would be:

var ValidatorMessage = (function (_super) {
    function ValidatorMessage() {
        _super.apply(this, arguments);
    }
    __extends(ValidatorMessage, _super);
    return ValidatorMessage;
})(message.Message);

Upvotes: -1

basarat
basarat

Reputation: 276189

Since you are compiling browser side you need to compile with --module amd option. You seem to have compiled with --module commonjs which is invalid for a browser target.

See : http://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1

Upvotes: 2

Related Questions