Write Tabris.js Apps in TypeScript

The dynamic typing in JavaScript allows for more flexibility, but it comes at the price of weaker tool support. Explicit type definitions in your code can support editors to provide more exact suggestions as you type …

… and to discover problems earlier …

TypeScript is a superset of JavaScript that adds type information to the language. It is compiled to regular JavaScript, so it can be used for Tabris.js apps. As TypeScript follows the development of EcmaScript closely, it is a future-proof choice. You can already use ES6 language features that are not yet supported directly by the JavaScript engines on mobile devices, such as imports and lambda expressions. Let’s see how to use it for Tabris.js apps.

Preparations

You should have npm installed on your machine. To work with TypeScript, you’ll also need the typescript compiler (tsc). The typescript definition manager (tsd) is also useful.

npm install -g tsc
npm install -g tsd

TypeScript is developed by Microsoft and their free Visual Studio Code Editor has probably the best TypeScript support at the moment. It’s a good choice to get started with TypeScript. They provide free downloads for all systems.

Type Definitions

In order to let the TypeScript compiler check your code against the API of a JavaScript library, it needs a type definition for this library. For many popular JS libraries, those type definitions are already available in the DefinitelyTyped repository, Tabris.js included. You can install type definitions into your project using the typescript definition manager:

tsd install tabris

This downloads the file tabris.d.ts and stores it in a directory named typings.

Writing TypeScript

As JavaScript is a superset of TypeScript, you can start with any Tabris.js snippet or example app, rename the .js file(s) to end with .ts and start editing. Types are optional in TypeScript, so you can add them as needed. For example, the following statements are equivalent:

var page = tabris.create("Page", { title: "Example" });
var page: tabris.Page = tabris.create("Page", { title: "Example" });

Here you can safely leave out the type, because the Tabris.js type definitions include the return type of create when called with "Page". However, types are useful where they cannot be inferred, for example for function parameters:

function createBooksList(books: Book[]): tabris.CollectionView {
  return tabris.create("CollectionView", {
    items: books,
    ...
  });
}

Compile TypeScript to JavaScript

A tsconfig.json file in the root of your TypeScript project provides the TypeScript compiler with information such as input files and command line options. Here is an example:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": true
  },
  "filesGlob": ["./**/*.ts", "!./node_modules/**/*.ts"]
}

When this file is in place, all you need to do is call the typescript compiler for the entire project:

tsc -p .

This will compile all .ts files configured in tsconfig.json and create corresponding .js files. You can also create just a single output file using the --out <file> parameter. Another interesting option is the --watch parameter that tells the compiler to track the input files and re-compile as you make changes. Typescript compiler integrations for gulp and grunt are also available.