Inheritance in Typescript

[A.Russell]

I am having difficulty with subclassing. 

 

I have successfully made a subcless of Phaser.Sprite. Now I want to make a subclass of my subclass and I cannot understand why it won't work. 

 

My subclass of Phaser.Sprite: 

module AppSpace{    export class Entity extends Phaser.Sprite {        constructor(game: Phaser.Game, x: number, y: number, key: string) {            super(game, x, y, key)              //code        }   //more code    }}

No problem with that. So, what is wrong with the following?: 

module AppSpace {    export class Anchor extends AppSpace.Entity {        constructor(game: Phaser.Game, x: number, y: number, key: string) {            super(game, x, y, key);        }        //more code    }    //more code}

At runtime, I get this error: 0x800a138f - JavaScript runtime error: Unable to get property 'prototype' of undefined or null reference

[A.Russell]

Update: 

 

I have found a solution, but could somebody explain to me why this happens?

 

It was the name of the class. Although, there was no other file/class called "Anchor" within the module.Furthermore (and this is really strange), calling this class anything with "Anchor" as a prefix wouldn't work! (AnchorSprite, AnchorYourMum, AnchorX). 

 

Why? 

[yahiko]

Have you included all your resulting JavaScript files in your HTML?

[Tom Atom]

Hi, be sure your classes are compiled / merged / loaded in correct order. I am using VS 2013 and I had to reorder my .ts files several times to get rid of wierd errors during runtime.

[A.Russell]

My buddha, I don't want to do that. I just want it work the way it's supposed to. 

 

I am just going to keep on with renaming classes that get this error for now. Hopefully this is a weakness of Typescript/ Javascript that will be worked out in the near future. 

 

Yahiko, I am compiling everything to a single file. The only other file I have included is Phaser.js (and pretty soon a 2d vector library as I haven't found one in Phaser, yet). 

 

I wonder if it has something to do with the Phaser.Sprite (the super, super class) has an "anchor" property. Even so, that should not matter. 

[clark]

AnchorYourMum

 

 

The problem is usually because when using internal modules instead of require, the compiler does not exactly know what order to construct the JS output in.  This is often down to matching method signatures where TypeScript cannot see the inference clearly. 

You may find in your code that for example:

Anchor extends Emitter  but..... Anchor is before Emitter in the JS output.  In this case, you get a bad inheritance. 

The solution is always to add a reference when you are extending.

 

/// <reference path="some/component/entity.ts" />module clark {    export class Anchor extends Entity {        constructor(game: Phaser.Game, x: number, y: number, key: string) {            super(game, x, y, key);        }    }}

Note that require("some/relative/emitter") when using external modules would make this line of code irrelevant (means the same thing). 

So when using internal modules, make sure you are using references to help TypeScript in this case.  The reference forces Emitter above Anchor in the JS output.

NOTE

 

My reference to phaser.d.ts is within my main Game.ts entry point.  For that reason, you do not need to spam your "Emitter extends Sprite" with references to phaser if you put it there.  Phaser will always be available to all Game code, so it is just a matter of making sure your own extended classes have references like this.

Anyways try this see if it solves your issue.

[A.Russell]

Thank you, 

 

So, to be sure, add a reference to Phaser in the game's kickoff class, and add a reference to anything that you inherit from (extends). Yeah?

[clark]

Yeah! It is not always needed, but I add it.   Usually I specifically add references when I am extending my own code (like your Anchor Entity) or when a class has a "new Ball()"..... Meaning that, the first time wherever the ball is being "newed up".  I would put a reference there too.  Just to say "This UISystem class requires the LivesPanel.ts class to operate". 

[A.Russell]

Thanks for your advice, Clark. I'll do that from now on.