Ionic and Typings
Picture this, if you will…
npm install the library, go to import it, and then…nothing. Nothing happens. What gives?
npm install -g typings typings search lodash typings install lodash --save
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
env– environments (E.g.
global– global (
window.<var>) libraries (
dt– typings from DefinitelyTyped (usually
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! <https://github.com/typings/typings/issues>
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.