New tutorial: How to use Phaser with TypeScript

[rich]

I've just completed Part 1 of a tutorial on using Phaser with TypeScript. There were a few kicking around from pre 1.0 versions, but this one is bang up to date, with TypeScript 0.9.5 and Phaser 1.1.3.

 

http://www.photonstorm.com/phaser/how-to-use-phaser-with-typescript

 

Part 2 will show how to use the more advanced features of TypeScript with Phaser, like extending classes and state management.

[Mike]

Ahhh knowledge from the source. Thanks Rich.

 

Honestly the only reason to start using typescript was because Phaser used and this was a sign for a good and structured codebase.

 

Now more than half an year later I see that the good codebase is made by the developer, but still TypeScript can save you some  headaches and help with code organization.

 

So useful tutorial and Part 2 will be surely needed.

[rich]

Yup Part 2 coming tomorrow.

[Mikeware]

I started to try and use TypeScript with Phaser for the Ludum Dare competition; however, it wasn't compiling as the Array constructs weren't typed properly.  I supposed this is a new restriction with the 0.9.5 TypeScript update from last week?

 

Will you be updating the definition file to type the Arrays soon?

 

Thanks!

[rich]

The tutorials were written (and compiled) using 0.9.5, but I'll draw your attention to this part at the beginning

 

"Note: At the time of writing the most accurate TypeScript definitions file is here in the dev branch of Phaser (click the “Raw” link to download it). Please use this one for the rest of this tutorial. We’ll remove this notice when it moves from dev to master."

[Mikeware]

Thanks!

 

I thought I had pulled the latest copy, but I guess it defaults to the master branch and not the dev branch.  I'll try that out.

[BigRob154]

Any recommendations for Editors / IDEs for TypeScript on OS X?

[pat]

webstorm is a good idea

http://www.jetbrains.com/webstorm/download/

[aladine]

Now this is getting VERY interesting, i think it's time for me to clean that big JavaScript mess i did last week lol

 

Thanx a lot Rich!! 

[JHardin1112]

So I'm following along with the tutorial - http://www.photonstorm.com/phaser/how-to-use-phaser-with-typescript.  I got to Step 5 'Test you game' and the image displays correctly as shown below.  I am concerned because at this point I am getting 10 build errors in Visual Studio 2013.  

 

The errors are all the same and state, "The property 'game' does not exist on value of type 'SimpleGame'.  It's obviously working as I'm seeing the image in my browser.  But why does it not recognize game?  I made sure I have the latest TypeScript definitions from the dev branch.

 

It's more a matter of convenience because I'm unable to use code completion for anything following 'game'.  I just realized after I posted this that my code completion is not working as expected.  In Step 6, it tells me to type in 'logo.' and I should get a pop-up with all the properties of a Phaser.Sprite object but no pop-up appears.  I'm assuming this is directly related to my errors.

 

 

Any ideas?

 

[JHardin1112]

Just wanted to see if anyone had any ideas regarding the issue in the previous post I submitted last week? I like using Visual Studio 2013 to develop, but this issue with the Intellisense is bothersome.  I'm sure I'm missing something glaringly obvious, and hope someone (Rich =D) can advise me.

[rich]

Have you tried adding a <reference> to the phaser.d.ts file at the top of your TS files?

[JHardin1112]

Have you tried adding a <reference> to the phaser.d.ts file at the top of your TS files?

Rich, no I have not.  Honestly, I'm unsure of how to do this (correct syntax and all.)  Would you be able to post the line of code that adds the reference?

 

I'm used to adding references in vb and c# (imports and using), just never worked with TypeScript before.

[JHardin1112]

I thought this was correct - <reference path ="phaser.d.ts" / >, but VS does not like this line of code.

NVM - A little bit more research and I found the answer - /// <reference path="phaser.d.ts"/>

 

Damnit....spoke too soon.  Still NOT working.

[JHardin1112]

Rich,

 

Once I add the 3 files to my project (phaser.js, phaser.d.ts, phaser.min.js) I'm supposed to grab the latest TS definitions using RAW view from the following link https://raw2.github.com/photonstorm/phaser/dev/build/phaser.d.ts, correct? I went to RAW, selected all content and copy pasted it into my projects phaser.d.ts file.  Was this correct?

 

Here is a screen grab of my curren situation.  Does anything obvious stand out to you?

 

 

Thanks in advance.  I know you're getting over being sick, so I appreciate your help.

[rich]

You're missing this line from the code:

game: Phaser.Game;

Should go after the constructor (before the preload function)

[JHardin1112]

You're missing this line from the code:

game: Phaser.Game;

Should go after the constructor (before the preload function)

 

Oh man, thank you Rich! It worked (of course it did!) I'm kicking myself for missing something so obvious.  It really helps to have a second set of eyes in these moments.  Thanks again!