2017-05-26 21:28:06 +02:00
# TypeScript Configuration
2017-04-01 01:57:13 +02:00
2017-03-27 16:08:53 +01:00
TypeScript is a primary language for Angular application development.
It is a superset 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 ](guide/typescript-configuration#tsconfig )— TypeScript compiler configuration.
* [typings ](guide/typescript-configuration#typings )— TypesScript declaration files.
{@a tsconfig}
2017-04-01 01:57:13 +02:00
2017-03-27 16:08:53 +01:00
## *tsconfig.json*
Typically, you add a TypeScript configuration file called `tsconfig.json` to your project to
guide the compiler as it generates JavaScript files.
2018-07-19 15:00:08 -07:00
< div class = "alert is-helpful" >
2017-03-27 16:08:53 +01:00
2017-04-01 01:57:13 +02:00
2017-03-27 16:08:53 +01:00
For details about `tsconfig.json` , see the official
[TypeScript wiki ](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html ).
2017-04-10 16:51:13 +01:00
< / div >
2017-03-27 16:08:53 +01:00
2017-04-01 01:57:13 +02:00
The [Setup ](guide/setup ) guide uses the following `tsconfig.json` :
2019-02-07 14:02:54 +00:00
< code-example lang = "json" header = "tsconfig.json" linenums = "false" >
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
< / code-example >
2017-05-30 11:22:06 +03:00
2017-04-01 01:57:13 +02:00
This file contains options and flags that are essential for Angular applications.
{@a noImplicitAny}
2017-03-27 16:08:53 +01:00
### *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`* .
The documentation setup sets the `noImplicitAny` flag to `true` .
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` .
When the `noImplicitAny` flag is `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:
2017-03-30 20:04:18 +01:00
2017-03-27 16:08:53 +01:00
< code-example format = "." >
2017-04-01 01:57:13 +02:00
"suppressImplicitAnyIndexErrors":true
2017-03-27 16:08:53 +01:00
< / code-example >
2017-04-01 01:57:13 +02:00
2017-03-27 16:08:53 +01:00
The documentation setup sets this flag to `true` as well.
{@a typings}
2017-04-01 01:57:13 +02:00
2017-03-27 16:08:53 +01:00
## 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 ](https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html )— `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.
Angular packages include them already.**
### lib.d.ts
TypeScript includes a special declaration file called `lib.d.ts` . This file contains the ambient declarations for various common JavaScript constructs present in JavaScript runtimes and the DOM.
Based on the `--target` , TypeScript adds _additional_ ambient declarations
like `Promise` if the target is `es6` .
Since the QuickStart is targeting `es5` , you can override the
list of declaration files to be included:
2017-03-30 20:04:18 +01:00
2017-03-27 16:08:53 +01:00
< code-example format = "." >
2017-04-01 01:57:13 +02:00
"lib": ["es2015", "dom"]
2017-03-27 16:08:53 +01:00
< / code-example >
2017-04-01 01:57:13 +02:00
2017-03-27 16:08:53 +01:00
Thanks to that, you have all the `es6` typings even when targeting `es5` .
### 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.
You can install these typings via `npm` using the
[`@types/*` scoped package ](http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html )
and Typescript, starting at 2.0, automatically recognizes them.
For instance, to install typings for `jasmine` you could do `npm install @types/jasmine --save-dev` .
2017-04-01 01:57:13 +02:00
2017-03-27 16:08:53 +01:00
QuickStart identifies two *typings* , or `d.ts` , files:
* [jasmine ](http://jasmine.github.io/ ) typings for the Jasmine test framework.
2018-04-26 15:47:31 -07:00
* [node ](https://www.npmjs.com/package/@types/node ) for code that references objects in the *Node.js®* environment;
2018-06-13 10:05:24 -05:00
2017-03-27 16:08:53 +01:00
2017-05-26 21:28:06 +02:00
QuickStart doesn't require these typings but many of the samples do.
2018-01-27 13:45:03 +09:00
{@a target}
### *target*
By default, the target is `es5` , you can configure the target to `es6` if you only want to deploy the application to
es6 compatible browser. But if you configure the target to `es6` in some old browser such as `IE` , `Syntax Error` will be thrown.