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
TypeScriptis a superset ofJavaScriptwith 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
JavaScriptis currentlyES5so we transpileTypeScriptintoES5 JavaScript, by default the compiler targetsES5.
