Angular 13 TypeScript Version

Angular 13 TypeScript Version

We'll look at how to verify and upgrade the TypeScript version in your Angular 13 project in this article.

Angular is built on TypeScript rather than plain JavaScript. On top of JavaScript, TS offers types and OOP features, but it does not run in the browser; instead, it is compiled on the developer's system to JS before being pushed to production and executed in a web browser.

TypeScript demands some configuration files, such as the tsconfig.json file, which includes multiple settings to configure the compiler, but with Angular CLI, you can scaffold a new project with TS pre-configured and begin writing code without dealing with any challenges associated to front-end development tooling.

Each new version of TypeScript includes a slew of new features to help you simplify your programming and development process.

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 13 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 13 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: 13.0.5
Node: 12.14.0
OS: linux x64

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

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