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 ofJavaScript
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 currentlyES5
so we transpileTypeScript
intoES5 JavaScript
, by default the compiler targetsES5
.