July 8, 2016
  • All
  • Ionic 2

Ionic and Typings

Mike Hartington

Director of Developer Relation...

Picture this, if you will…

You just found this new JavaScript library, and you want to use it in your slick new Ionic 2 app. You npm install the library, go to import it, and then…nothing. Nothing happens. What gives?

Turns out, mixing JavaScript and TypeScript can be problematic when TypeScript doesn’t understand the extra code. In this screencast, we’ll go over the steps needed to make TypeScript play nice with other JavaScript libraries.

npm install -g typings
typings search lodash
typings install lodash --save

Typings

Let’s look at Typings a bit more and check out some of the details. Typings is a successor to a few other tools out there for managing type definitions. These are files that describe a bit of code, so the compile can provide feedback if you pass it an incorrect type. These type definitions can have many sources.

  • npm – dependencies from NPM
  • github – dependencies directly from GitHub (E.g. Duo, JSPM)
  • bower – dependencies from Bower
  • common – “standard” libraries without a known “source”
  • shared – shared library functionality
  • lib – shared environment functionality (mirror of shared) (--global)
  • env – environments (E.g. atom, electron) (--global)
  • global – global (window.<var>) libraries (--global)
  • dt – typings from DefinitelyTyped (usually --global)

Taken from Typings README

This can seem like a lot, but it’s fairly easy to reason about when you look at some of the most common sources.

  • npm – Definitions for modules that are from NPM
  • dt – Definitions from the legacy repo, Definitely Typed

For the most part, these are the main places from which you’ll see Typings pull. If you admit a warning, and Typings cannot resolve it, it will prompt you with a warning, letting you know where you can install the definitions from.

A common issue that people can face is handling global definitions. For example, let’s try to install the ES6-shim definitions from typings.

typings install dt~es6-shim
typings ERR! message Attempted to compile "es6-shim" as an external module, but it looks like a global module. You'll need to enable the global option to continue.

typings ERR! cwd /Users/mhartington/GitHub/ionic/tmp
typings ERR! system Darwin 16.0.0
typings ERR! command "/usr/local/Cellar/node/6.3.0/bin/node" "/usr/local/bin/typings" "install" "dt~es6-shim"
typings ERR! node -v v6.3.0
typings ERR! typings -v 1.3.1

typings ERR! If you need help, you may report this error at:
typings ERR! &lt;https://github.com/typings/typings/issues&gt;

This error looks bad, but it’s actually extremely helpful. The ES6-shim module is a global module, meaning it sits on the window object of the browser. So we need to tell the TypeScript compiler that this is global module, and we know it will be available at runtime.

Closing words

While at first it can feel very frustrating to get everything to work together, with a little setup, TypesScript projects and JavaScript libraries can work together perfectly.


Mike Hartington

Director of Developer Relation...