How to separate modules classes into individual files?

[NateTheGreatt]

Hello,

 

I'm having an issue with getting my individual TypeScript files to communicate with each other. I believe it's because I do not have a good enough understanding of the behavior of modules in TypeScript, and so I was hoping someone could shed some light on the problem.

Currently I want to separate my Player class into its own file (Player.ts) and then be able to reference the Player class inside of my game state (World.ts) file. However, when I try to reference/import the Player.ts file inside of World.ts, I simply cannot get it to recognize the class. I have tried just about every combination of ///<reference...> and import I could think of.

///<reference path='./libs/jquery.d.ts'/>///<reference path='./libs/lib.d.ts'/>///<reference path='./libs/phaser.d.ts'/>///<reference path="./socket.io-client.d.ts" />export module Rosemary {    export class Player extends Phaser.Sprite {        upKey: any;        downKey: any;        leftKey: any;        rightKey: any;        prevX: number;        prevY: number;        socket: any;        constructor(public game : Phaser.Game, public x : number, public y : number, public _socket:any){            super(game,x,y,'player',0);            this.socket = _socket;            this.game.add.existing(this);            this.upKey = this.game.input.keyboard.addKey(Phaser.Keyboard.W);            this.downKey = this.game.input.keyboard.addKey(Phaser.Keyboard.S);            this.leftKey = this.game.input.keyboard.addKey(Phaser.Keyboard.A);            this.rightKey = this.game.input.keyboard.addKey(Phaser.Keyboard.D);            this.socket.on('player moved', function(data) {                console.log('another client has moved position: '+data.x+', '+data.y);            });        }        create() {        }        update() {            if(this.upKey.isDown) {                this.y--;                this.socket.emit('moved', {x:this.x,y:this.y});            }            if(this.downKey.isDown) {                this.y++;                this.socket.emit('moved', {x:this.x,y:this.y});            }            if(this.leftKey.isDown) {                this.x--;                this.socket.emit('moved', {x:this.x,y:this.y});            }            if(this.rightKey.isDown) {                this.x++;                this.socket.emit('moved', {x:this.x,y:this.y});            }        }    }}

///<reference path='./libs/jquery.d.ts'/>///<reference path='./libs/lib.d.ts'/>///<reference path='./libs/phaser.d.ts'/>///<reference path="./socket.io-client.d.ts" />import socketio = require('socket.io-client');import Player = require('Player');export module Rosemary {    export class World extends Phaser.State {        player: any;        socket: any;        constructor(){            // assign global vars            super();            this.socket = socketio.connect('http://localhost:3000');        }        create(){            console.log("World - create");            //this.socket = socketio.connect('http://localhost:3000');            this.player = new Player(this.game,40,40, this.socket);        }    }}

This is the structure I would like to use but the compilation fails due to the following error: TS2083: Invalid 'new' expression.

 

I have tried to reference the Player.ts file with ///<reference path="./Player.ts" /> as well, but this doesn't work at all either and the error thrown says it can't find "Player"

 

I'm definitely doing something wrong here, but I can't quite figure out what it is. Any advice?

[lewster32]

I'm not familiar with TypeScript or module syntax, but I can direct you to a Phaser TypeScript project that while horribly out of date has the project broken into individual files, so the layout should at least still be valid, even if much of the functionality will not: http://www.photonstorm.com/phaser/advanced-phaser-and-typescript-projects

[NateTheGreatt]

I'm not familiar with TypeScript or module syntax, but I can direct you to a Phaser TypeScript project that while horribly out of date has the project broken into individual files, so the layout should at least still be valid, even if much of the functionality will not: http://www.photonstorm.com/phaser/advanced-phaser-and-typescript-projects

 

I have also tried the methods he used in that tutorial, to no avail . When I try to access the player class via Rosemary.Player, it throws this error at me: error TS2094: The property 'Player' does not exist on value of type 'Rosemary'.

[lewster32]

From your examples you're using 'export module' whereas in the tutorial it's just using 'module'. From my limited experience with these, I would've thought export was reserved for things you want the module to make public, and not for the module definition itself?

[NateTheGreatt]

Yes, exporting exposes the module/class/function. However it shouldn't have an effect either way in this case because these two classes are within the same module. I have also tried compiling with every possible combination of exports before the module definition and before the class definition. It doesn't seem to make any difference.

 

 

edit:

 

I think it may be a bug in WebStorm's TypeScript integration, because I created a project via command line leveraging yeoman and was able to get it to compile after fiddling with the code a bit.