TypeScript Configuration

TypeScript is a primary language for Angular application development. It is a dialect of JavaScript with design-time support for type-safety and tooling.

Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the tsc compiler, which requires some configuration.

This page covers some aspects of TypeScript configuration and the TypeScript environment that are important to Angular developers, including details about the following files:

• tsconfig.json - TypeScript compiler configuration.
• typings - TypesScript declaration files.

tsconfig.json

Typically, you add a TypeScript configuration file (tsconfig.json) to your project to guide the compiler as it generates JavaScript files.

We created the following tsconfig.json for QuickStart:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

This file contains options and flags that are essential for Angular 2 applications.

noImplicitAny and suppressImplicitAnyIndexErrors

TypeScript developers disagree about whether the noImplicitAny flag should be true or false. There is no correct answer and you can change the flag later. But your choice now can make a difference in larger projects, so it merits discussion.

When the noImplicitAny flag is false (the default), and if the compiler cannot infer the variable type based on how it's used, the compiler silently defaults the type to any. That's what is meant by implicit any.

In the QuickStart exercise, the noImplicitAny flag is initialized to false to make learning TypeScript development easier.

When the noImplicitAny flag is true and the TypeScript compiler cannot infer the type, it still generates the JavaScript files, but it also reports an error. Many seasoned developers prefer this stricter setting because type checking catches more unintentional errors at compile time.

You can set a variable's type to any even when the noImplicitAny flag is true.

If you set the noImplicitAny flag to true, you may get implicit index errors as well. Most developers feel that this particular error is more annoying than helpful. You can suppress them with the following additional flag:

"suppressImplicitAnyIndexErrors":true

TypeScript Typings

Many JavaScript libraries, such as jQuery, the Jasmine testing library, and Angular, extend the JavaScript environment with features and syntax that the TypeScript compiler doesn't recognize natively. When the compiler doesn't recognize something, it throws an error.

Use TypeScript type definition files—d.ts files—to tell the compiler about the libraries you load.

TypeScript-aware editors leverage these same definition files to display type information about library features.

Many libraries include definition files in their npm packages where both the TypeScript compiler and editors can find them. Angular is one such library. The node_modules/@angular/core/ folder of any Angular application contains several d.ts files that describe parts of Angular.

You need do nothing to get typings files for library packages that include d.ts files—as all Angular packages do.

Installable typings files

Many libraries—jQuery, Jasmine, and Lodash among them—do not include d.ts files in their npm packages. Fortunately, either their authors or community contributors have created separate d.ts files for these libraries and published them in well-known locations. The typings tool can find and fetch these files for you.

After installing the typings tool with npm (it's listed among the devDependencies in the package.json), add an npm script (postinstall) to run that tool automatically, after npm installation finishes.

{
  "scripts": {
    "postinstall": "typings install"
  }
}

This typings tool command, typings install, installs the d.ts files into the typings folder. You created a typings.json file in the QuickStart:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

QuickStart identified three typings (d.ts) files:

• core-js brings ES2015/ES6 capabilities to ES5 browsers

• jasmine typings for the Jasmine test framework

• node for code that references objects in the nodejs environment; You can view an example in the webpack page.

QuickStart doesn't require these typings but many of the samples do.

You can also run the typings tool yourself. If the postInstall command fails to (re)install the typings files, run the following command to do so.

npm run typings install

Run this command to list the installed typings files:

npm run typings list

The following command installs or updates the typings file for the Jasmine test library from the DefinitelyTyped repository, and updates the typings.config file so you receive it automatically the next time you install typings.

npm run typings -- install dt~jasmine --save --global