How I Use Angular 2 with Webpack: Type Definitions

Reading time: 1 minute

A disclaimer: I’m not claiming to be an expert here and I’m open to any corrections or input from everyone; this is just what’s worked for me so far. Please enjoy!

As I mentioned in the first post of this series, this series looks out how I have been using Angular 2 with Webpack. The topics in the series are:

  1. Directory Structure
  2. Node Modules & NPM Configuration
  3. Typings
  4. Code Linting
  5. TypeScript Configuration
  6. Karma Configuration
  7. Webpack Configuration
  8. Sample Application

In this article we’ll look at how to get a hold of the the necessary TypeScript definition files and save them as part of the project configuration in typings.json.

TypeScript Definitions (.d.ts files)

Previously, I showed that we installed the Typings library locally to the project. NPM symlinks any executables into ./node_modules/.bin, which gives us easier access to the libraries. I mention this because the following commands will use typings from that location.

The first command run is to create a typings.json file:

At this point it only has the name of the project, a version entry (set to false), and an empty dependencies object. We’ll use Typings’ install command to fill in that object.

There are only 3 TypeScript definitions that I install:

This command saves the references to the typings.json created in the previous command, so that they are now part of the project configuration. The --save flag, is what saves them to the typings.json file. The other flag, --ambient, lets Typings know to look at the DefinitelyTyped repository for definition files.

This also will generate two directories with corresponding .d.ts files in a typings directory. The first is main, the second is browser. For the purposes of this series the files have the exact same information, which is to lay out references to the TypeScript definitions that we installed.

Node is done so that if I decide to use the require keyword instead of import to include files into my project, TypeScript will be able to handle it.

Jasmine is imported so that when running tests, TypeScript doesn’t complain about Jasmine-specific functions and variables.

Lastly, we import the ES6 Promise definitions since they’ll could be used as part of any Angular 2 code, namely HTTP requests.

And That’s It!

This was a pretty fast, simple post. In the next post, I’ll show how I set up rules for code linting TypeScript code.

Leave a Comment

Your email address will not be published. Required fields are marked *