Following the issues highlighted in https://docs.google.com/document/d/1eB6cGCG_2ircfS5GzpDC9dBgikeYYcMxghVH5sDESHw/edit?usp=sharing and discussions held with the TypeScript team. Together with the TypeScript team it was decided that the best course of action is to rollback this feature. In future, it is not excluded that solution style tsconfigs are re-introduced. See: https://github.com/angular/angular-cli/pull/18478 PR Close #38394
151 lines
6.5 KiB
Markdown
151 lines
6.5 KiB
Markdown
# TypeScript configuration
|
|
|
|
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}
|
|
|
|
## Configuration files
|
|
|
|
A given Angular workspace contains several TypeScript configuration files.
|
|
At the root `tsconfig.json` file specifies the base TypeScript and Angular compiler options that all projects in the workspace inherit.
|
|
|
|
The TypeScript and Angular have a wide range of options which can be used to configure type-checking features and generated output.
|
|
For more information, see the [Configuration inheritance with extends](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends) section of the TypeScript documentation.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
For more information TypeScript configuration files, see the official [TypeScript wiki](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
|
|
For details about configuration inheritance, see the [Configuration inheritance with extends](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends) section.
|
|
|
|
</div>
|
|
|
|
The initial `tsconfig.json` for an Angular workspace typically looks like the following example.
|
|
|
|
<code-example lang="json" header="tsconfig.json" linenums="false">
|
|
{
|
|
"compileOnSave": false,
|
|
"compilerOptions": {
|
|
"baseUrl": "./",
|
|
"outDir": "./dist/out-tsc",
|
|
"sourceMap": true,
|
|
"declaration": false,
|
|
"downlevelIteration": true,
|
|
"experimentalDecorators": true,
|
|
"moduleResolution": "node",
|
|
"importHelpers": true,
|
|
"target": "es2015",
|
|
"module": "es2020",
|
|
"lib": [
|
|
"es2018",
|
|
"dom"
|
|
]
|
|
}
|
|
}
|
|
</code-example>
|
|
|
|
### Strict mode
|
|
|
|
When you create new workspaces and projects, you have the option to use Angular's strict mode, which can help you write better, more maintainable code.
|
|
For more information, see [Strict mode](/guide/strict-mode).
|
|
|
|
{@a noImplicitAny}
|
|
|
|
### *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`*.
|
|
|
|
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:
|
|
|
|
<code-example>
|
|
|
|
"suppressImplicitAnyIndexErrors": true
|
|
|
|
</code-example>
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
For more information about how the TypeScript configuration affects compilation, see [Angular Compiler Options](guide/angular-compiler-options) and [Template Type Checking](guide/template-typecheck).
|
|
|
|
</div>
|
|
|
|
|
|
{@a typings}
|
|
|
|
## 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.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
You don't need to do anything to get *typings* files for library packages that include `d.ts` files.
|
|
Angular packages include them already.
|
|
|
|
</div>
|
|
|
|
### 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`.
|
|
|
|
By default, the target is `es2015`. If you are targeting `es5`, you still have newer type declarations due to the list of declaration files included:
|
|
|
|
<code-example path="getting-started/tsconfig.0.json" header="tsconfig.json (lib excerpt)" region="lib"></code-example>
|
|
|
|
### 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 run `npm install @types/jasmine --save-dev`.
|
|
|
|
|
|
{@a target}
|
|
|
|
### *target*
|
|
|
|
By default, the target is `es2015`, which is supported only in modern browsers. You can configure the target to `es5` to specifically support legacy browsers. [Differential loading](guide/deployment#differential-loading) is also provided by the Angular CLI to support modern, and legacy browsers with separate bundles.
|