Improved TypeScript support for Tabris.js 1.8

June 21, 2016 | 3 min Read

With popular frameworks like Angular 2 now recommending its use by default, TypeScript continues its rise in popularity. Reception is usually very positive with both veteran JavaScript developers and those coming from a Java or C# background. We have mentioned before how TypeScript can be used to enhance your Tabris.js development. Since then, a lot has changed. With Tabris.js 1.8, getting started with TypeScript and Tabris.js is easier than ever and provides even more assistance, helping you discover functions quicker without having to remember the exact spelling and catching mistakes and typos earlier.

Getting started

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
yo tabris-js

This generates a new project complete with some example code and the jsconfig.json and tsconfig.json configuration files with a few recommended settings. You can immediately test your new project on your device with:

npm run build
npm start

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 get method.

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 on methods.

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: