Onsen UI has been definitely typed! Developing with TypeScript

As part of the new utilities introduced in version 1.3, Onsen UI now supports TypeScript. Don’t worry, we won’t port Onsen UI to TypeScript, but we’ve got type definitions to support those who prefer a strongly typed development!

These definitions will inform you about the existing objects, functions and parameters while you develop with Onsen UI, and will automagically check that your app doesn’t mess up with function and variable types.

In the next lines we will show how to get these definitions and how to use them to develop with Onsen UI.

Definitely Typed for .d.ts files

Declaration files (.d.ts) describe the TypeScript types of Javascript libraries and they can be included into other TypeScript files in order to provide the type check they refer to. Definitely Typed is a project that aims to provide high quality TypeScript type definitions for third party libraries written in Javascript (and they are doing it!), so every developer can include them in a TypeScript project. They accept only checked and tested definitions to ensure the quality of the content, and Onsen UI is now part of it with the new definitions that have just been merged. You can find the onsenui.d.ts file here.

Understanding onsenui.d.ts

First of all, in order to enable this feaure we need to include onsenui.d.ts in the beginning of our TypeScript (.ts) file. The syntax is the following:

/// <reference path="/path/to/onsenui.d.ts" />

onsenui.d.ts just declares the types that Onsen UI will use, but it does not create any object at all. It automatically assigns its corresponding type to the ons object (the only object that is created in Onsen UI by default) and offers interfaces for the rest of Onsen UI objects (e.g. carousel, sliding menu, etc.) that we will create in our apps.

However, usually Onsen UI objects are created using directives in HTML, not in Javascript nor TypeScript. Well, don’t panic, we just need to ‘connect’ an object with its type by specifying it in TypeScript and then create the actual object in HTML as we always do:

Every type follows the same name pattern: name of the element in UpperCamelCase plus ‘View’ in the end (element ‘SplitView’ has the same type name).

There are only types for objects which have at least one method, so there is no need to specify the type of objects like ons-list. Once the editor and the TS compiler know the type of each object, the magic can start.

Visual Studio

Visual Studio supports TypeScript out of the box (what one would expect from Microsoft software), so we can just include onsenui.d.ts to the file where needed. We can actually drag and drop the .d.ts into the file where we are programming and it will include the reference automatically.

VS will inform us of the possible types to use in our variables and functions.

A list of available members will appear when creating an object.

It’s also possible to read method descriptions, parameters and return values for a quick reference before checking the complete guide.

Sublime Text

In Sublime Text and most of the other editors, we will need to install a specific plugin to enable TypeScript support. In this case, we have tried ArcticTypescript and Better TypeScript for Sublime Text:

In addition to displaying the possible method matches, the type check reveals an error in var options: Type ‘{ closeMenu: string; }’ is not assignable to type ‘slidingMenuOptions’, since it expects a boolean.

Conclusion

We are expanding Onsen UI step by step with your help! Tell us your opinion about Onsen UI and TypeScript combo in the comments and ping us if you find anything wrong in the definitions. Questions on Stackoverflow, issues on Github and happy coding!

Originally published at onsen.io on April 10, 2015.