what are typescript transform

Question

I just read an article on official blog angular 5 (https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced). There is talk of typescript transform. In detail:

"TypeScript Transforms Under the hood, the Angular compiler now operates as a TypeScript transform, making incremental rebuilds dramatically faster. TypeScript transforms were a new feature introduced as part of TypeScript 2.3 that allows us to hook into the standard TypeScript compilation pipeline."

I would like to understand better it. Tranforms or compilation pipeline, what are? tnx!

Answer 1

This referes to the internals of how the typescript compiler generates Javascript code. Since 2.3 the compiler takes the Typescript AST (abstract syntax tree) and applies a series of transformations (the transformation pipeline). At the end of the pipeline you get a new AST that is a Javascript AST.

From the source code, these are the current transformers:

So for example when compiling for a es5 target with jsx enabled and system modules the following transforms will be included:

• transformTypeScript - Will remove typescript specific annotations

• transformJsx - Will remove jsx syntax and transform it to Javascript

• transformESNext - Will transform esnext to es2017

• transformES2017 - Will transform es2017 to es2016

• transformES2016 - Will transform es2016 to es2015

• transformES2015 - Will transform es2015 to es5 (minus generators)

• transformGenerators - Will transform es2015 generators to es5

• transformSystemModule - Will add module specific js code.

After all the transformations are applied, writing the AST to a file is a trivial operation.