Inheritance issue in Typescript

[chewax]

Hi, guys.

 

I have been looking in the forum but could not find anything that could help me here.

 

Here is my main game code:

module Superhero{    export class Game extends Phaser.Game{        conf: Superhero.Config;        ui: Superhero.UI;        constructor () {            super(Config.gameWidth(), Config.gameHeight(), Phaser.CANVAS, 'sh', null);            this.conf = new Superhero.Config();            this.ui = new Superhero.UI();            this.state.add('Boot', Boot, false);            this.state.add('Preloader', Preloader, false);            this.state.add('Menu', Menu, false);            this.state.add('Level1', Level1, false);            this.state.start('Boot');        }    }}

So far so good.

 

However, when I access the game instance from some state (say Level1) my custom properties are not there:

this.game.ui = new UI(this.game);

I get:

 

error TS2339: Property 'ui' does not exist on type 'Game'.

 

What am i doing wrong.

 

Thanks!!!

[agmcleod]

How are you initializing this.game?

[chewax]

I am not...i thought that i was automatically initialised upon creating the state...doesn't it?

[Tom Atom]

Hi, this.game in game state is Phaser.Game base class. Your Game class extends it. In JS your "ui" propery will be visible on runtime but if you misstype and instead of "ui" you type "ai" new property will be dynamically created (and you dervied class will have "ui" as well as "ai")

 

This is where Typescript helps. It will not allow it. And as long as you work with Phaser.Game even "ui" will not be visible to you and you get error. Because Phaser.Game does not have "ui" property. You know that in this.game is actually your Game class. So, you have to cast it:

(<Game> this.game).ui = new UI(this.game);

[chewax]

Oh great!!! Thanks!

Let me check that and will get back to you!

[chewax]

That worked like a charm!!

Thanks!