Skip to content

Commit

Permalink
docs: update typescript configuration (angular#47842)
Browse files Browse the repository at this point in the history
This commits update the TypeScript configuration for the updated version 15 release.

PR Close angular#47842
  • Loading branch information
alan-agius4 authored and nouraellm committed Nov 6, 2022
1 parent 099b722 commit 271e057
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 48 deletions.
31 changes: 20 additions & 11 deletions aio/content/examples/getting-started/tsconfig.0.json
Original file line number Diff line number Diff line change
@@ -1,28 +1,37 @@
// This tsconfig is used in the TypeScript
// configuration guide (../guide/typescript-configuration.md)
// configuration guide (../guide/typescript-configuration.md)
// to display the latest default configuration
// Note: Update with every major release to the latest default
// #docregion
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
// #docregion lib
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"es2018",
"ES2022",
"dom"
]
// #enddocregion lib
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
7 changes: 3 additions & 4 deletions aio/content/guide/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ To disable these warnings, add the CommonJS module name to `allowedCommonJsDepen

The Angular CLI uses [Browserslist](https://github.com/browserslist/browserslist) to ensure compatibility with different browser versions. [Autoprefixer](https://github.com/postcss/autoprefixer) is used for CSS vendor prefixing and [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) for JavaScript syntax transformations.

Internally, the Angular CLI uses the below `browserslist` configuration which matches the [browsers that are supported by Angular](guide/browser-support).
Internally, the Angular CLI uses the below `browserslist` configuration which matches the [browsers that are supported](guide/browser-support) by Angular.

<code-example format="none" language="text">
last 1 Chrome version
Expand All @@ -317,9 +317,6 @@ Internally, the Angular CLI uses the below `browserslist` configuration which ma
</code-example>


The CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure compatibility with different browser and browser versions.
You might find it necessary to target specific browsers or exclude certain browser versions from your build.

To override the internal configuration, add a new file named `.browserslistrc`, to the project directory, that specifies the browsers you want to support:

<code-example format="none" language="text">
Expand All @@ -330,7 +327,9 @@ To override the internal configuration, add a new file named `.browserslistrc`,
See the [browserslist repository](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions.

<div class="alert is-helpful">

Use [browsersl.ist](https://browsersl.ist) to display compatible browsers for a `browserslist` query.

</div>

<a id="proxy"></a>
Expand Down
42 changes: 9 additions & 33 deletions aio/content/guide/typescript-configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,34 +32,14 @@ For more information, see the [Configuration inheritance with extends](https://w

<div class="alert is-helpful">

For more information TypeScript configuration files, see the official [TypeScript wiki](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
For more information TypeScript configuration files, see the official [TypeScript handbook](https://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>
<code-example header="tsconfig.json" path="getting-started/tsconfig.0.json"></code-example>

<a id="noImplicitAny"></a>

Expand Down Expand Up @@ -116,17 +96,12 @@ 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`.
### `lib`

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:
TypeScript includes a default set of declaration files.
These files contain the ambient declarations for various common JavaScript constructs present in JavaScript runtimes and the DOM.

<code-example header="tsconfig.json (lib excerpt)" path="getting-started/tsconfig.0.json" region="lib"></code-example>
For more information, see [lib](https://www.typescriptlang.org/tsconfig#lib) in the TypeScript guide.

### Installable typings files

Expand All @@ -148,12 +123,13 @@ For instance, to install typings for `chai` you run `npm install @types/chai --s

### `target`

By default, the target is `es2020`, which is supported in modern browsers.
By default, the target is `ES2022`. To control ECMA syntax use the [Browserslist](https://github.com/browserslist/browserslist) configuration file.
For more information, see the [configuring browser compatibility](/guide/build#configuring-browser-compatibility) guide.

<!-- links -->

<!-- external links -->

<!-- end links -->

@reviewed 2022-02-28
@reviewed 2022-10-24

0 comments on commit 271e057

Please sign in to comment.