Typescript compiler architecture high level overview

I was curious to know how typescript code would get compiled in to JS files. Did a deep dive and found out these.

There are essentially 5 main flow points of the typescript library and how JS files are compiled.

1. program.ts:
2. checker.ts:
3. emitter.ts:
4. parser.ts:
5. transformers:

In layman terms, this is what they do

1. parser.ts: Converts the TS code into a tree-like structure (AST- Abstract syntax tree ). That the rest of the compiler can understand and work with. This file is like the reader of the TS compiler.
2. checker.ts: Analyzes the tree and ensures type-safety. Think of it as an inspector of the TS compiler.
3. transformers: Transforms the tree to handle language features such as converting modern JS syntax to older versions. Think of it as a compatibility maker. Makes the JS output code more compatible with different versions.
4. emitter.ts: Generates the final Javascript code from the transformed tree. This is the part where the AST (Abstract syntax tree) is converted to the Javascript code. It’s like a translator.
5. program.ts: Coordinates the entire compilation process. Think of it like an orchestrator. Coordinating with the above (parser, checker, transformers, emitter), to successfully compile the code

Again, I went through this real quick and may have missed out on something. Glad to have any gaps in my understanding filled, if there are any!

Resources

1. compiler/program.ts https://github.com/microsoft/TypeScript/blob/main/src/compiler/program.ts
2. compiler/checker.ts https://github.com/microsoft/TypeScript/blob/main/src/compiler/checker.ts
3. compiler/emitter.ts https://github.com/microsoft/TypeScript/blob/main/src/compiler/emitter.ts
4. compiler/parser.ts https://github.com/microsoft/TypeScript/blob/main/src/compiler/parser.ts
5. compiler/transformers https://github.com/microsoft/TypeScript/blob/main/src/compiler/transformers