Transpilation

TypeScript code is not directly understandable by the browsers. That's why if the code is written in TypeScript then it is by default compiled and converted into ES6 or ES5 but is also able to generate constructs used in ECMAScript 3, also known as ECMAScript 2015.

Since most browsers don’t support ES6 features, therefore we are going to transpile our TypeScript into ES5.i.e. translate the code into JavaScript.This process is known as Transpilation and a tool called tsc is used to compile on the command line. With the help of JavaScript code, browsers are able to understand the code and display. To executes TypeScript code on the fly, upon page load there is also an alpha version of a client-side compiler in JavaScript.

Let’s see how to transpile TypeScript code into JavaScript code locally on your computer.

If we look at the tsconfig.json file in our project, we can see there are a few settings are used to convert TypeScript into JavaScript.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5", (1)
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
} 

In the above image, you see that the target is set to ES5.

Note

  • TypeScript is a superset of JavaScript with a few more advanced features.
  • The browser can’t run TypeScript so we first need to transpile it into JavaScript and this process is known as transpilation.
  • The most common version of JavaScript is currently ES5 so we transpile TypeScript into ES5 JavaScript, by default the compiler targets ES5.