How to create Typescript definitions from existing Javascript libraries

Typescript is a subset of Javascript.

Sometimes you need to integrate existing Javascript libraries so you can compile your ts files. For the most part, the best libraries have already been ported over to definition files available here. They have a great new interface for their definition manager which is a node package. You can browse the available typescript definitions here.

To reference a typescript definition you need to add the following syntax to the top of your typescript file.

/// <reference path='../libraries/sugar.d.ts' />
/// <reference path='../libraries/myLib.ts' />

This allows the typescript compiler to import the definitions or types made available in the referenced file.

If you can't find your library on DefinitelyTyped you have 3 options:

1. Merge your existing javascript into a new Typescript file and generate a definition. This can get really messy depending on the complexity of the javascript and other libraries it also includes.

tsc --declaration mergedJavascriptLibrary.ts

2. Hand code a definition file. Look for another library to guide you on how to hand roll your own. The cordova typescript definition shows you how to rig up something simple.

3. Declare your defintion as 'any'. This method allows you to continue working on your project without providing any type information about your library. You won't get any code completion. You can come in at a later point and complete your definition properly but for the time being you've stopped the compiler warnings.

// An example definition for http://pellepim.bitbucket.org/jstz/
declare var jstz: any; 

***

Mudbath is a 40+ person digital product agency based in Newcastle, NSW. We research, design and develop products for industry leaders.

Are you a developer who's looking to join Newcastle's fastest-growing software agency? Get in touch.