Phaser Project Setup Using Typescript via Terminal and GruntJS

[livelongandyadayada]

Phaser Project Setup Using Typescript via Terminal and GruntJS

 

I'm trying to start my first Phaser project ever but I want to do it with typescript since it's one of the main reasons why I'm doing this project to begin with in order to learn Typescript. I'm working of an old Mac Pro 3,1 running Snow Leopard and there is no way for me to upgrade, just in case that issue comes up. I'm also coding via terminal using GruntJS as my preprocessor, MAMP as my webserver and for everything else I use sublime. 

 

Anywho because I don't have VS and most tutorials regarding Typescript and Phaser use VS as the main IDE, I figured I may have lost a couple of steps along the way or something. 

 

All I know is that my Typescript is giving me errors no matter what I try. The precompiler which is grunt-ts seems to be working jst fine but right away I get an error in my code on line 1 column 1, so I'm guessing it's something I'm doing wrong codewise.

 

here is my app.js:

 

/// <reference path="../typescript/phaser.d.ts"/>



class SimpleGame {



    constructor() {

        this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create });

    }



    game: Phaser.Game;



    preload() {

        this.game.load.image('logo', 'phaser2.png');

    }



    create() {

        var logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo');

        logo.anchor.setTo(0.5, 0.5);

    }



}



window.onload = () => {



    var game = new SimpleGame();



};

 

 

and Here is the error I get on grunt-ts while compiling to javascript:

Running "ts:dev" (ts) task

Compiling...

### Fast Compile >>ts/app.ts

### Fast Compile >>ts/phaser.d.ts

Using tsc v1.6.2

/Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(1,1): error TS6053: File '/Users/ish/Games/Phaser_html5/demo_01/ts/pixi.d.ts' not found.

/Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(2,1): error TS6053: File '/Users/ish/Games/Phaser_html5/demo_01/ts/p2.d.ts' not found.

/Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(7,15): error TS2300: Duplicate identifier 'Phaser'.

/Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(56,16): error TS2300: Duplicate identifier 'Phaser'.

/Users/ish/Games/Phaser_html5/demo_01/typescript/phaser.d.ts(7,15): error TS2300: Duplicate identifier 'Phaser'.

/Users/ish/Games/Phaser_html5/demo_01/typescript/phaser.d.ts(56,16): error TS2300: Duplicate identifier 'Phaser'.



>> 6 non-emit-preventing type warnings  

>> Error: tsc return code: 2

Warning: Task "ts:dev" failed. Use --force to continue.



Aborted due to warnings.

Which, for me, begs the question: How do I reference all of the Phaser framework files when not using an IDE like VS? How would I manually incorporate the Phaser engine into my project and reference the files?

 

Say if I download the Phaser framework manually via my browser. How would I setup those files in that folder on my project? I can't seem to find a direct reference or tutorial to that anywhere. The ones involving typescript use Visual Studio as the ide and the ones that do not use VS only use plain vanilla javascript code. I'm looking for tuts that use Typescript but not any particular ide preferably just terminal or command prompt.

 

Any help appreciated. Thanks.

[cloakedninjas]

You shouldn't be compiling your .d.ts file.

### Fast Compile >>ts/phaser.d.ts

I'd check your Grunt task isn't including these. For reference here's one of my configs:

grunt.initConfig({    ts: {      development: {        src: ['src/scripts/**/*.ts'],        dest: 'public/js',        options: {          module: 'amd',          target: 'es5',          sourceMap: true,          sourceRoot: '/ts',          declaration: false        }      }    },

And probably good to create a single reference.d.ts file which manages your definition imports in a single location, e.g.

/// <reference path="../../typings/tsd.d.ts" />/// <reference path="../../bower_components/phaser/typescript/phaser.comments.d.ts" />/// <reference path="../../bower_components/phaser/typescript/pixi.comments.d.ts" />