Angular 10 TypeScript Version

In this tutorial, we'll learn how to check and update the TypeScript version in your Angular 10 project.

Angular is based on TypeScript instead of plain JavaScript. TS provides types and OOP constructs on top of JS but it doesn't run in the browser instead gets compiled in the developer's machine to JS before it can be shipped to production and executed in a web browser.

Angular 9 shipped with TypeScript 3.7 while Angular 10 came with TypeScript 3.8.

TS requires some configuration files such as the tsconfig.json file which contains various settings to configure the compiler but thanks to Angular CLI, you can scaffold a new project with TS pre-configured and start writing your code without dealing with any complexities related to the front-end development tooling.

Each new version of TypeScript comes packed with many new features that you can use to simply your coding and development journey.

What's TypeScript?

TypeScript is a superset of JavaScript developed and maintained by Microsoft. It adds strong types, better error checking, type safety and integrations with code editors and IDEs which make developer's lives easier when developing large JS apps that scale.

TS is the primary language for Angular 2+ application development which make writing large apps easier than Angular.JS, the previous version that was based on JS.

Since web browsers can't execute TypeScript directly. It must be “transpiled” into JavaScript using the tsc compiler, which needs to be first configured. This step is done in the developer's machine before the app runs in the production environment.

Even if TypeScript is configured by default in your Angular projects generated with Angular CLI, it's important to understand some aspects of TypeScript configuration and the TypeScript configuration files such as:

  • tsconfig.json which contains configuration options for the TypeScript compiler in a JSON format.
  • typings which are TypesScript declaration files.

TypeScript Configuration File

Before using TypeScript in your Angular projects, you'll need to add a configuration file called tsconfig.json which tells the TypeScript compiler how it should generate the JavaScript files.

For example, the Angular framework makes extensive use of decorators, for various artifacts like components, services and modules, which are still an experimental feature of TS, therefore we need to tell the compiler to makes use of this experimental feature in our project.

If you used the Angular CLI to generate your project, the tsconfig.json file should be created at the root folder of the project.

You can learn more about the tsconfig.json file from the official TypeScript docs.

This a typical tsconfig.json file for an Angular 10 project:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

You can see that Angular adds some configuration options, under the angularCompilerOptions entry, designed for its own Ahead-Of-Time compiler. This is not of the standard TypeScript configuration file.

The angularCompilerOptions entry is designed to supply configuration options when you use AOT compilation. You can control how your application gets compiled by specifying template compiler options in the tsconfig.json file.

The template options object, angularCompilerOptions, is a sibling to the compilerOptions object that supplies standard options to the TypeScript compiler.

How to Get the TypeScript Version Used in your Angular Project?

Let's now see how to get the version of TypeScript installed in your Angular 10 project and update it to the latest version.

You have many ways to check the version of typescript.

You can open the package.json file of your Angular project and check the devDependencies node. It should contain typescript version used:

"typescript": "^3.8.0",

You can also check the version of the terminal using the following command:

tsc -v

This will display the globally installed version of typescript.

You can also check the version of typescript used in your project version, by navigating to the node_modules\.bin\ folder and run the following command:

./tsc -v

Finally, you can also use Angular CLI to check the version of Typescript, as follows:

ng -v

This will out put the typescript version and the versions of the other dependencies:

Angular CLI: 10.0.5
Node: 12.14.0
OS: linux x64

Angular: 10.0.8
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.5
@angular-devkit/build-angular     0.1000.5
@angular-devkit/build-optimizer   0.1000.5
@angular-devkit/build-webpack     0.1000.5
@angular-devkit/core              10.0.5
@angular-devkit/schematics        10.0.5
@angular/cli                      10.0.5
@ngtools/webpack                  10.0.5
@schematics/angular               10.0.5
@schematics/update                0.1000.5
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

  • Author: Techiediaries Team