Transpilation in Angular

Pradeep Maurya

3 years ago

Transpilation = translate + compilation

The Angular compiler translates the html template to super optimized JavaScript code.
The typescript compiler compiles typescript code into JavaScript.

Also Read: Difference between JavaScript and TypeScript: JavaScript vs Typescript

Transpiling is the one of the process to convert the typescript into javascript. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Typescript is used to write code in the Angular applications, the code is internally transpiled into javascript.

Transpiling code is a similar concept to the compilation process, with one big difference.

Compiling: code from a high level language is get converted to machine level language.
Transpiling: code from a high level language gets converted to another high level language.

What is the Transpilation?

The concept of converting Typescript into JavaScript is called Transpiling.

We use tools like Babel to do this conversion.

Browsers can’t execute TypeScript directly. Typescript must be “transpiled” into JavaScript using the tsc compiler, which requires some configuration.

TypeScript—–>Transpile—–>JavaScript
Command—–>tsc filename.ts

Files for TypeScript Configuration.

•tsconfig.json — TypeScript compiler configuration.
•typings —TypesScript declaration files.

tsconfig.json file code


/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

/* To learn more about this file see: https://angular.io/config/tsconfig. */

{

"compileOnSave": false,

"compilerOptions": {

"baseUrl": "./",

"outDir": "./dist/out-tsc",

"sourceMap": true,

"declaration": false,

"downlevelIteration": true,

"experimentalDecorators": true,

"moduleResolution": "node",

"importHelpers": true,

"target": "es2015",

"module": "es2020",

"lib": [

"es2018",

"dom"

]

}

Also Read: Angular Online Quiz Test

TypeScript typings

Many JavaScript libraries, including jQuery, the Jasmine testing library, and Angular, extend the JavaScript environment with features and syntax that the TypeScript compiler does not natively recognize. The compiler throws an error when it doesn’t recognize something.

Many libraries include definition files in their npm packages where both the TypeScript compiler and editors can find them. Angular is one such library. The node_modules/@angular/core/ folder of any Angular application contains several d.ts files that describe parts of Angular.

You don’t need to do anything to get typings files for library packages that include d.ts files. Angular packages include them already.

tsconfig.json (lib excerpt)


"lib": [
  "es2018",
  "dom"
]

"lib": [

"es2018",

"dom"

]

Wrapping Word

Hope I was able to help someone out. If you have any questions feel free to ask anything on the comment section. Cheers!!.

Are you want to get web development and designing services? Submit a paid service request

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co