Angular recently released its version 10 and its packed with features. One important change is the fact that its new TypeScript support breaks compatibility with previous versions. Let’s see what is new and how it benefits Angular developers.
Changes to TypeScript support in Angular 10 can be summarized in three areas:
Angular 10 now supports only TypeScript 3.9
New tsconfig.base.json in project structure
Strict typechecking for new workspaces
New TypeScript 3.9 support
Angular 10 is a major released published on June 24 and loaded with a lot of new additions: from UI components like a new date range picker to major changes under the hood like its TypeScript version support.
Angular TypeScript support has been kept up to date very fast, showing a complete commitment to the JavaScript typed superset:
- Angular 9 released on Feb 6 supported TypeScript 3.7
- Angular 9.1 released on Mar 25 introduced support for TypeScript 3.8
- Angular 10 now only supports TypeScript 3.9
Note that this is a breaking change: TypeScript 3.8 and previous are no longer supported on Angular and if you for any reason need them, you shouldn’t update to Angular 10 to preserve integrity of your app.
TSlib, the official runtime library for TypeScript that contains all of the TypeScript helper functions, has been updated to version 2.0.
TSLint, the static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors, has been updated to version 6. This is the last major version of TSLint before it became deprecated so it’s likely that a new Angular version will introduce support for TypeScript ESLint, the evolution of TSLint that enables ESLint to support TypeScript.
New project structure
Another area where the Angular TypeScript support was also updated is in the project layout. Version 10 now introduces a new tsconfig.base.json. This new file works in conjunction with the traditional tsconfig.json:
- the
tsconfig.jsonfile contains a list of paths to other TypeScript configuration files included in the current project to determine which configuration file a file belongs to so that it can apply the appropriate options. While code editors and TypeScript’s language server use this file for a better development experience, compilers don’t. - The
tsconfig.base.jsonfile specifies the base TypeScript and Angular compiler options that all projects in the workspace inherit.
Updating an app with ng update will automatically update the structure to use the new tsconfig.base.json.
New strict settings
Angular 10 now offers a new option for CLI command `ng new`. When you create a new workspace with
ng new --strict
the new workspace will have new settings toggled on to activate strict mode in TypeScript and configure linting rules to prevent declarations of type any. This allows to help catch bugs ahead of time, and also allows the CLI to perform advanced optimizations on the app.
More changes in Angular 10
This post summarized the changes in Angular TypeScript support. There are many more changes that you can read about in the Angular 10 release blog post
