Typescript Phaser with atom

For JavaScript development I use atom.io and I am very satisfied with it. Starting a Phaser project I decided to use a Typescript for it, as it increases development speed a lot. Luckily there is a Typescript plug-in for atom.io.

After installing the plug-in you need to configure your project. You can structure your project as you like, I usually structured my project as follows:

source - Typescript files
libs - JavaScript files
assets - game assets
css - CSS files
index.html

To use the Phaser with the Typescript you need definition files. You can get them here. Just download them and put inside the source folder.

After that you can initialize your project. To do it click crtl/cmd+shift+p and chose Typescript: Create Tsconfig.json. Then you should have the Tsconfig.json in your source folder. You can change it to fit your needs. For the full information just look into official documentation.

For this example I will compile all Typescript files to game.js file inside libs folder. To do so set "out": "../libs/game.js" compiler option.

Now create your project files. When you open one of them, you will see the Typescript toolbar. To build your project just press F6.

One side note: you need at least one ts file in your path to initialize Tsconfig.json.

Hopefully this guide will help you to get up and ready for Typescript development with Phaser.