Typescript Compiler

Typescript is rapidly gaining momentum. So, today I thought I talk about it a little. Here is an overview of the typescript architecture.

Typescript Architecture

Overall the typescript architecture is

                                                                |------------|
                           |----------------------------------> | TypeScript |
                           |                                    |   .d.ts    |
                           |                                    |------------|
                           |
|------------|          |-----|               |-----|           |------------|
| TypeScript | -parse-> | AST | ->transform-> | AST | ->print-> | JavaScript |
|   source   |    |     |-----|       |       |-----|           |   source   |
|------------|    |        |          |                         |------------|
                  |    type-check     |
                  |        |          |
                  |        v          |
                  |    |--------|     |
                  |--> | errors | <---|
                       |--------|

Let us now discuss each step briefly:

1. Parse: It is a traditional recursive descent parser, tweaked a bit to support incremental parsing, that emits an abstract syntax tree (AST). It is a tree that helps in identifying which files are imported in a file.

2. Type Checker: The type-checker constructs a symbol table and then performs type analysis of every expression in the file, reporting errors it finds.

3. Transform: The transform step is a set of AST to AST transformations that perform various tasks such as, removing type declarations, lowering module and class declarations to ES5, converting async methods to state-machines, etc.

4. Print: Actual conversion of TS to JS the most expensive operation of the whole process.

So, what is the use of all this? Actually typescript provides some extension points which we change the output and make many awesome things.

Extension points

TypeScript supports the following extension points to alter its output. You can:

1. Modify the TypeScript source it sees (CompilerHost.getSourceFile)

2. Alter the list of transforms (CustomTransformers). You can read about how to create a custom transform which is the most recommended way to change a typescript program here.

3. Intercept the output before it is written (WriteFileCallback)

It is not recommended to alter the source code as this complicates the managing of source maps, and is not supported by TypeScript's language service plug-in model.

Let me know your thoughts on this. Would you love to have more such articles?

Comments

[aRtoo]

So what is .d.ts I was always bothered by that but never really searched it until now. lols.

[Ajit Singh]

The d.ts just store the types of various variables as the js file cannot store variable types.

stackoverflow.com/questions/212472...

[aRtoo]

I was just reading this too. thanks. This is to support some old JS code so they will have type annotations right? that's how I understand it.

[Ajit Singh]

How actually typescript uses the .d.ts file I still have to understand that so giving a perfect answer to you an answer at this point will not be right. Once I will read and understand that I'll post that.

With my current info, I think you a little off. It's actually when you transfer your code as js files as in the compiled version of your code. It is in js form so, typescript has no way of knowing the different types that are there in the code. So, the d.ts are also sent in these builds so that the typescript knows what are the type of different js variables and objects. It can be old code new code etc.