TypeScript Internal working

Question Covered:

1. Different Stages in flow

2. Internal working

3. Why it is needed

4. Result passed on different states

Full Code Flow

    TS Code
        → Lexer
        → Parser [Abstract Syntax Tree (AST)]
        → Binder
        → Checker
        → Emitter
        → Output (.js, .d.ts, .map)

1. Lexer (Scanner Tokenizer)

What it is

Convert a raw TypeScript code into Tokens [Small Meaningful Units].

Example

let x: number = 10;

Tokens:

[let] [identifier: x] [number] [=] [10] [;]

What it does internally

• Read code character by character

• Group characters into token using rules/ Grammar

• Ignores whitespace/ comments (mostly)

Output

➡️ Stream of Tokens → goes to Parser

2. Parser [Creates Abstract Syntax Tree (AST)]

What it is

Transform tokens into a tree structure called AST (Abstract Syntax Tree).

Example

VariableDeclaration
    ├── name: x
    ├── type: number
    └── value: 10

What it does internally

• Applies Grammar Rules (like JS/Ts syntax)

• Builds Hierarchical Structure

• Detects Syntax Error

Output

➡️ AST (Tree Structure)

3. Binder

What it is

Connects Identifies to their meaning (Symbols).

What it Creates

• Symbol Table

• Parent Pointer

• Flow Nodes (Control Flow Graph)

What it does Internally

• Walks through AST (Abstract Syntax Tree)

• For every identifier:

  • Creates a symbol (variable, function, class)

  • Stores it in a Symbol Table

• Links nodes with parents → easy traversal

• Builds flow graph for control flow analysis

Example

let x = 10
console.log(x);

Binder links:

• x → same symbol in both places.

Why needed

Without this:

• Compiler can't know what "x" refers to

• Scope resolution impossible

Output → Passed forward

➡️ AST + Symbol Table + Flow Graph

4. Checker (Type Checker)

What it is

The brain of TypeScript

What it does

• Type checking

• Type inference [Type Consistency Check]

• Validates correctness

Internal Work

• Uses: [from pervious stage]

  • AST

  • Symbol Table

  • Flow nodes

Why needed

• JavaScript doesn't have types.

• This step ensures type safety before runtime

Output → Passing forward

➡️ Annotates AST (types attached, error if any)

5. Emitter

What it does internally

• Traverses AST

• Removes TypeScript-only syntax:

  • types

  • interfaces

  • enums (converted)

• Converts to JavaScript

Example

• TypeScript Code

let x: number = 10;

Becomes:

• JavaScript Code

let x = 10;

Generates

• .js → executable JS

• .d.ts → type definitions

• .map → source maps (TS JS mapping)

Why needed

Browsers/ Nodes.js understand only JavaScript

Output

➡️ Final files for running & tooling

-—» THE END, see you in Next Article😁👍