Blog

The latest news about Phaser Editor 2D
Home » Blog » TypeScript » Welcome TypeScript IDE for Phaser Editor!

Welcome TypeScript IDE for Phaser Editor!

This article is not valid for the last Phaser Editor version. To install TypeScript IDE on Phaser Editor v1.4.2 please read here: https://phasereditor2d.com/blog/2017/09/how-to-install-typescript-ide-in-phaser-editor-v142

Welcome TypeScript IDE!

We follow the work of Angelo Zerr since he developed Tern Eclipse IDE, a great tool to write JavaScript code. This Eclipse comitter now is working on other promising projects that are TypeScript IDE and TextMate for Eclipse, both projects that we now are going to integrate to Phaser Editor progressively.

What is TypeScript IDE? It is a set of plugins that you can install on Eclipse to edit and compile TypeScript code. It uses tsserver and understand TypeScrtipt projects (tsconfig.json) and Salsa projects (jsconfig.json).

Read the complete list of features

Read the TypeScript IDE wiki

Read the release notes of TypeScript 1.2.0

Install TypeSript IDE

Let's go step by step:

  • Add Eclipse Neon to the available update sites:
    • Open the preferences window and select Install/Update > Available Software Sites.
    • Click the Add button and enter the Eclipse Neon update site http://download.eclipse.org/releases/neon: Add Neon site
    • Press OK to close the preferences window.
  • Install TypeScript IDE
    • Open the Eclipse Marketplace client Help > Eclipse Marketplace....
    • Search for typescript ide. Note there are other plugins related to TypeScript, look in the image the one you have to install: TypeScipt IDE on Marketplace
    • Click on the Install button and confirm all the dialogs.
    • To check that it was installed well click on Help > Installation Details. The TypeScript plugins should be listed.

Add TypeScript support to a Phaser project

Since version v1.4.0-preview Phaser Editor supports to create TypeScript projects. Just click on File > New > Phaser Project and select Add TypeScript support: Enable TypeScript support in Phaser project

It will create a Phaser project with the Phaser definition (*.d.ts) files.

To link the project with TypeScript IDE follow these steps:

  • Right click on WebContent/tsconfig.jsonfile and select TypeScript > Add TypeScript BuildPath.
  • Right click on the project and select Properties. It opens the project properties dialog.
  • Select TypeScript and check the Enable TypeScript Builder? field. Enable TypeScript builder

And that's all. Now when you modify a TS file and save it, it will compile automatically to JavaScript. To change this behavior and other parameters open the tsconfig.json file. It shows a nice visual editor that show you the main parameters.

Try edit any file, it should show you the Phaser API auto-completions.

Phaser auto completion

We recommend you to read the TypeScript IDE wiki to learn all its features and how to configure them. It is a relative new project so please support them by providing feedback on its issues. You can open issue on our repo too.

Enjoy it!