Upgrading to Typings 1.x

I have been playing with Angular 2 beta 4 and also updated typings from 0.x to 1.x. What I didn’t expect was a ton of breaking changes (but I guess I should have). I am using the latest version of the angular-cli project as of today, 1.0.0-beta.9. Here’s some quick information to help you make the transition to typings 1.x.

Ambient to Global

The first step is to update your typings.json file to change ambient to global. This is also the case when searching or installing DefinitelyTyped packages; where before you had to use the --ambient flag, now you need to use the --global flag.

The old typings.json file looked like this:

{
  "ambientDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
  }
}

The new typings.json file should be:

{
  "globalDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
  }
}

As I mentioned previously, in addition to using the new --global flag you must also specify the DefinitelyTyped (dt) source when searching for, or installing packages using the typings cli.

Here is an example of searching and installing the jquery typings declaration from DefinitelyTyped:

$ typings search jquery --global
$ typings install dt~jquery --global --save

Note the preceding <source>~ before the package name (jquery) when installing the package, as well as the use of the --global flag. I am also saving the installation to the typings.json file via the --save flag.

In case you’re interested, the full command-line interface for the typings install command is:

[<source>~]<pkg>[@<version>][#<tag>]

Update Typings to 1.x

The next step is to update your package.json file to use the 1.x version of typings, to date that version is 1.3.1.

$ npm uninstall typings --save
$ npm cache clean
$ npm install typings --save-dev

With the latest version installed, and our typings.json file updated, we are ready to re-install our typings definitions. To do this, we will remove the entire typings directory and all of it’s contents first, then we will install the new definition files.

$ rm -rf typings
$ typings install

Update References to index.d.ts File

The final step is to update your references to either main.d.ts or browser.d.ts to use the new index.d.ts file. For me, I had to to update my app’s src/typings.d.ts file from:

/// <reference path="../typings/browser.d.ts" />

To reference the index.d.ts file:

/// <reference path="../typings/index.d.ts" />

And that’s it.

Note, if you want the old main.d.ts and browser.d.ts files back, you need to add a resolution property to your typings.json configuration file, such as:

{
  "resolution": {
    "main": "typings/main",
    "browser": "typings/browser"
  }
}