Inheritance with TypeScript doesn't works browser side

Question

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;
    }

What is message after the line: var message = require("./Message.class"); you can console.log(message) in Chrome or firefox to log it and see it's value. It should be a function so you could console.log(typeof message); as well and see if it's a function. — HMR
– HMR, Commented Nov 28, 2013 at 11:44
Main post edited. It's a function. I wrote the function require myself because it didn't exists before: require = function(file){ var files = file.split('/'); file = files[files.length - 1].replace('.class', ''); return exports[file] || window[file]; } — Vadorequest
– Vadorequest, Commented Nov 28, 2013 at 11:53
Finally I used requireJs and AMD compilation flag and it's working. — Vadorequest
– Vadorequest, Commented Nov 29, 2013 at 23:17

basarat · Accepted Answer · 2013-11-28 12:35:59Z

2

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

answered Nov 28, 2013 at 12:35

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vadorequest Over a year ago

I want to use it both on server and browser side, is it possible?

Vadorequest Over a year ago

I mean, I have typescript files that will be use only by the server, others only by the browser and other by both. How can I do it? I watched the video, thanks.

Ryan Cavanaugh Over a year ago

You'll have to compile it twice, once for server, once for client.

Vadorequest Over a year ago

I'm working on it, using WebStorm IDE it's possible to use several TypeScript file watchers and add filters and compilation option for each.

basarat Over a year ago

@Vadorequest good suggestion for a webstorm feature, isn't there yet though. I authored / use grunt-ts : github.com/basarat/grunt-ts

|

Vadorequest · Accepted Answer · 2016-03-23 20:34:30Z

1

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

edited Mar 23, 2016 at 20:34

answered Dec 2, 2013 at 15:29

Vadorequest

18.2k27 gold badges131 silver badges232 bronze badges

2 Comments

Carrie Kendall Over a year ago

This is not an answer, it is your opinions on IDEs and a dead link to an off-site resource. I'm interested in the dead link; can you include that in your answer's body?

Vadorequest Over a year ago

@CarrieKendall I don't have those screenshot anymore and it seems they've been deleted from my MEGA account. I'll update the answer to provide more information.

HMR · Accepted Answer · 2013-11-29 00:03:43Z

-1

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);

edited Nov 29, 2013 at 0:03

answered Nov 28, 2013 at 11:58

HMR

39.5k26 gold badges99 silver badges175 bronze badges

3 Comments

Vadorequest Over a year ago

I can't really do it, I mean, my .js is generated, I can't change it manually, it's useless. It will be overrited next time. But maybe there is a problem with TS...

Vadorequest Over a year ago

Btw, your code doesn't works because _super doesn't exists in this context (last line) I tried using message.ValidatorMessage instead of _super but doesn't works too.

HMR Over a year ago

@Vadorequest You're right, I put the __extends helper at the wrong place too. Updated the answer. This should not cause an error because of variable hoisting. Still strange that typescript would compile it this way though.

Collectives™ on Stack Overflow

Inheritance with TypeScript doesn't works browser side

3 Answers 3

6 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related