Onsen UI has been definitely typed! Developing with TypeScript

Fran Dios
Fran Dios
Apr 10, 2015 · 4 min read
Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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.

Image for post
Image for post

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.

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store