If you’re already using Visual Studio Code, getting started with TypeScript is now as easy as installing the TypeScript compiler with
npm install -g typescript and renaming your
.js files to
.ts. The necessary
.d.ts type definition files are bundled within the Tabris.js npm module and are automatically found and used. However, some features that reside in the global namespace, namely our support for the Fetch API and Promises, require their type definition files to be explicitly specified for now. Luckily, this is already sorted out for you if you use our new Yeoman generator to create a new TypeScript template. Simply type:
npm install -g yo generator-tabris-js
This generates a new project complete with some example code and the
tsconfig.json configuration files with a few recommended settings. You can immediately test your new project on your device with:
npm run build
New features in Tabris.js 1.8 for TypeScript
TypeScript now knows which properties belong to each type of widget.
That means that you also get the correctly inferred type from variables returned from the
Here the editor knows that bounds is of type “Bounds” and provides auto completion accordingly.
The same also works for the listener functions given to the event API’s
As mentioned above, Promises and the Fetch API methods are also supported with the correct project setup and the CanvasRenderingContext2D methods supported by Tabris.js are now also equipped with documented method definitions and property types.
Working with third-party libraries
Although Tabris.js now works with TypeScript out of the gate, most third-party libraries require external
.d.ts files to be acquired. DefinitelyTyped is a repository hosting thousands of such type definition files written by the community. Currently, the best way to acquire and manage these files is by using Typings, however with TypeScript 2.0 releasing soon you will be able to get them directly with npm. Read the blog post on blogs.msdn.microsoft.com for more information.
To see Tabris.js with TypeScript in action, check out our TypeScript Weather App example: