Prototype Syntax in TypeScript

[Vignarg]

I've probably started and deleted this post three times over the past month, but I think I'm just going to give up and reach out for help understanding this. 

 

I'm going through the Phaser StateManager guide and once again I see this type of code:

 

var MyGame = {};MyGame.StateA = function (game) {};MyGame.StateA.prototype = {     preload: function () {            this.load.image('background', '../assets/sky.jpg'); this.load.image('anizeen', '../assets/fate.png');     },     create: function () {            this.state.start('StateB');     }};

I've seen these through other posts from Rich and other devs helping people create objects outside of states (for example, not in this particular instance, obviously). Everytime I've tried to replicate it in TypeScript, I get an error that type {} is not assignable to type StateA, property 'game' is missing. Or whatever my first property listed might be. 

module MyGame {    export class StateA {        game: Phaser.Game         constructor(game: Phaser.Game){           this.game = game;        }    }    StateA.prototype = {    }}

In this case, property "game" is missing in type "{}". I can remove the game property or constructor and it still complains at me, or I remove both and it stops complaining, but the second I add anything, it goes red squiggles again. I tried going outside the module and using MyGame.StateA.prototype, and that was the same error. 

 

 

I've seen this same similar syntax for people creating hero/enemy objects from a base sprite and other examples. I'd love to use it, I just can't figure out how to do it in TypeScript. Any assistance would be greatly appreciated. 

[clark]

Try 

module MyGame {          export class StateA extends Phaser.State {    }         }

In this case, you do not need to add that constructor because its the same as the Phaser.State you are extending. 

When you see "prototype" in JS threads, I think it just means "properties" to your TypeScript class. 

So if you see StateA.prototype.create

It actually means this in this context
 

module MyGame {         export class StateA extends Phaser.State {         myVar: number         create(): void {               //all phaser states have a create method, so here is where we put create stuff.                 this.myVar = Math.random() * 100;                             }    }        }

Or here is just a random other extend this time, it is a group with an image within it.  I need to set stuff up in the constructor (unlike states) so I extend a group, and then pass it super(game) because Phaser.Group needs a Game reference.  Then I can build up my custom group with a image or another stuff.   When I want to use it I call "var gesture = new MyGame.TutorialGesture(this.game);"
 

module MyGame {    export class TutorialGesture extends Phaser.Group {        /**         * The image itself, the actual texture we will use         */        private image: Phaser.Image;        /**         * Constains the tutorial gesture artwork.  A centre aligned pointer.         */        constructor(game: Phaser.Game) {            super(game, null);            this.image = this.game.make.image(0, 0, AssetList.ThemeKey(), AssetList.Themes.POINTER);            this.image.anchor.set(0.5, 0.5);            this.add(this.image);        }        /**         * Destroy the gesture         */        destroy(): void {            if (this.image) {                this.image.destroy(true);                this.image = null;            }            super.destroy(true, false);        }    }}

[Vignarg]

I've been using extends after I saw it here in this guide, and seeing you explain it this way really makes it click. I was like "why wouldn't you just ... include all the methods you wanted originally in the class? Or extend it?" I thought there was some "instanced" reason or something. 

 

Thanks for taking the time to break it out that way, it makes perfect sense now.