The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

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.

  • Jonathan Dart

    It would be nice if you explained how to use a js lib when no definitions are available.

    • Mike Hartington

      Of course, this is possible to. For the most part, you can just declare your module inline.

      https://github.com/Microsoft/TypeScript/issues/6615

      This issue covers all the details of how you would do this.

      • http://matheo.co Mateo Tibaquirá Palacios

        Any available docs to read tips and learn how to build definitions for my Ionic 2 project? TIA 🙂

    • http://weblogs.asp.net/soever Serge van den Oever

      import {MyComponent} from ‘./MyComponent’; // ERROR: Cannot find module ‘./MyComponent’
      const MyComponent = require(‘./MyComponent’); // Warning if used as – see https://codereviewvideos.com/blog/warning-react-createelement/
      const X = require(‘./MyComponent’); // OK if used as
      const MyComponent = require(‘./MyComponent’).MyComponent; // OK
      const MyComponent = require(‘./MyComponent’).default; // OK if defined as export default class MyComponent
      const {MyComponent} = require(‘./MyComponent’); // OK, note that it is also possible to destructure multiple components

      For details on how to specify types for desctructured object parameters see https://blog.mariusschulz.com/2015/11/13/typing-destructured-object-parameters-in-typescript.

  • Thomas Bernard

    What if I want to use this kind of javascript lib (with no definitions but dependencies): https://github.com/ESTOS/gowebrtc.js into an ionic 2 project? What is the easy way to do it?
    with ionic 1 it was quite easy but with ionic 2 it seems to be a complete nightmare…

  • KelviROLEX

    pls i have been trying to install cordova-plugin-themeablebrowser, i have been able to install it using this command cordova plugin add cordova-plugin-themeablebrowser but i really don’t know how to import it to my typescript file… Please can anybody help me?

    • Mike Hartington

      This really isn’t the place for this. You might want to post in the forum

  • sameera207

    Hi, Thanks for the great post, Unfortunately I’m getting an error when trying to load lodash library.

    I’ve installed the typings and used typings to install lodash ([email protected]`). Strange thing is I’m not getting any errors in the compile type. (type script works fine). But when I access the lodash variable , it says

    `ionic $ Error: Cannot find module ‘lodash’ from `

    Following is my ts file

    import * as lodash from ‘lodash’;

    and Im accessing lodash inside one of my methods

    updateOptions(nodeName){
    let a = lodash.find(HashArray, function(e: any){
    return e.Name == nodeName;
    })
    }

    Any help would be much appreciated, TIA

    cheers

    Sam

  • Domenico Maisano

    Good tutorial, this was much needed on a current project that I am working on. On an off related note does anyone know the name of the terminal used in the video posted above?

  • Darragh Flynn

    This tutorial is very clear, and works perfectly for getting the lodash code completion and to eradicate errors in my IDE. However, when I run gulp build, I get a TS error that it cannot find the lodash module. I’m using the latest Ionic 2 version and everything but to no avail.

    • Holly

      Yeah I am also having the same issue! On beta.32

  • Brady Liles

    I’d like to point out the way typings is currently being done is different. Ionic has since moved away from using “typings install … ” to “npm install @types/lodash –save-dev –save-exact”

    • http://matheo.co Mateo Tibaquirá Palacios

      Need further documentation to get this use of @types

    • X4V1

      Thank you !
      Do you know where I could find some documentation about that ? The procedure explained here is not working… But with @types/lodash works nice 🙂

  • shikhar bansal

    I wanted to use mathjax library in ionic 2. I installed it via npm and then installed its typings via typings.But it doesn’t work! There is a line in the typings file `declare var MathJax:jax.IMathJax;`. I don’t know what to do.