TypeScript compiler API basics - Step-by-Step Execution

Concept Flow - TypeScript compiler API basics

Start: Load TypeScript API

↓

Create Program with files

↓

Get Source Files

↓

Parse and Analyze AST

↓

Perform Type Checking

↓

Emit JavaScript Output

↓

End

The TypeScript compiler API flow starts by loading the API, creating a program with source files, parsing and analyzing the code, checking types, and finally emitting JavaScript output.

Execution Sample

Typescript

import * as ts from 'typescript';

const program = ts.createProgram(['example.ts'], {});
const sourceFile = program.getSourceFile('example.ts');

console.log(sourceFile?.statements.length);

This code loads the TypeScript API, creates a program for 'example.ts', gets its source file, and logs the number of top-level statements.

Execution Table

Step	Action	Input/Condition	Result/Output
1	Import TypeScript API	ts module	ts object available
2	Create Program	Files: ['example.ts'], Options: {}	Program object created with files
3	Get Source File	Filename: 'example.ts'	SourceFile object or undefined
4	Access Statements	sourceFile?.statements	Array of statements in source file
5	Log statements length	sourceFile?.statements.length	Number of top-level statements printed
6	End	No more actions	Program ends

💡 All steps complete; program ends after logging statement count.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
ts	undefined	ts module imported	ts module imported	ts module imported	ts module imported
program	undefined	Program object created	Program object created	Program object created	Program object created
sourceFile	undefined	undefined	SourceFile object or undefined	SourceFile object or undefined	SourceFile object or undefined
sourceFile?.statements.length	undefined	undefined	undefined	Number of statements	Number of statements

Key Moments - 2 Insights

Why might sourceFile be undefined after calling getSourceFile?

If the filename is not included in the program's files or the file does not exist, getSourceFile returns undefined, as shown in step 3 of the execution_table.

What does sourceFile?.statements.length represent?

It represents the number of top-level statements in the TypeScript source file, as accessed in step 4 and logged in step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result of step 3 (Get Source File)?

A A SourceFile object or undefined

B An array of statements

C A Program object

D A number representing statement count

💡 Hint

Check the 'Result/Output' column for step 3 in the execution_table.

At which step is the number of top-level statements logged?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look for the action 'Log statements length' in the execution_table.

If 'example.ts' is missing, how does the variable 'sourceFile' change after step 3?

A It becomes a Program object

B It becomes undefined

C It contains an empty array

D It throws an error

💡 Hint

Refer to key_moments explanation about sourceFile being undefined if file is missing.

Concept Snapshot

TypeScript compiler API basics:
- Import 'typescript' module
- Create a Program with source files
- Get SourceFile objects
- Access AST nodes like statements
- Use API to analyze or emit code
- Handle undefined if file missing

Full Transcript

This visual execution shows how to use the TypeScript compiler API. First, the API module is imported. Then, a Program is created with a list of source files. Next, a SourceFile object is retrieved for a specific file. The code accesses the statements array from the SourceFile, which represents top-level code parts. Finally, it logs the number of statements. If the file is missing, the SourceFile is undefined. This step-by-step trace helps beginners see how the API loads and processes TypeScript code.

Practice

1.

What is the primary purpose of the TypeScript compiler API?

SourceFile is a key part of it. What does it help you do?

easy

A. Run TypeScript code directly in the browser

B. Read and modify TypeScript code programmatically

C. Convert TypeScript to JavaScript manually

D. Create user interfaces with TypeScript

Solution

1. Step 1: Understand the role of the compiler API

   The TypeScript compiler API is designed to let programs read and change TypeScript code, not to run it or build UI.

2. Step 2: Identify what SourceFile represents

   SourceFile is an object representing the code text, allowing exploration and modification.

3. Final Answer:

   Read and modify TypeScript code programmatically -> Option B

4. Quick Check:

   Compiler API = Code reading and modification [OK]

Hint: Remember: compiler API reads and changes code, not runs it [OK]

Common Mistakes:

• Thinking it runs TypeScript code directly
• Confusing it with UI libraries
• Assuming it manually converts code without automation

2.

Which of the following is the correct way to create a SourceFile using the TypeScript compiler API?

const sourceFile = ts.createSourceFile(____);

easy

A. (codeText, ts.ScriptTarget.Latest)

B. ('file.ts', codeText)

C. (codeText, 'file.ts', ts.ScriptTarget.Latest)

D. ('file.ts', codeText, ts.ScriptTarget.Latest)

Solution

1. Step 1: Recall the createSourceFile signature

   The method requires filename, source text, and script target in that order.

2. Step 2: Match the correct argument order

   ('file.ts', codeText, ts.ScriptTarget.Latest) correctly uses ('file.ts', codeText, ts.ScriptTarget.Latest).

3. Final Answer:

   ('file.ts', codeText, ts.ScriptTarget.Latest) -> Option D

4. Quick Check:

   Filename, text, target order = A [OK]

Hint: Filename first, then code text, then script target [OK]

Common Mistakes:

• Swapping filename and code text
• Omitting the script target argument
• Passing arguments in wrong order

3.

Given this code snippet using the TypeScript compiler API:

const sourceFile = ts.createSourceFile('test.ts', 'let x = 5;', ts.ScriptTarget.Latest);
const firstStatement = sourceFile.statements[0];
console.log(firstStatement.kind);

What will be printed?

medium

A. SyntaxKind.VariableStatement

B. 5

C. SyntaxKind.Identifier

D. undefined

Solution

1. Step 1: Understand what sourceFile.statements[0] is

   The first statement is let x = 5;, which is a variable declaration statement.

2. Step 2: Identify the kind of this statement

   Its kind is SyntaxKind.VariableStatement, a numeric enum value representing variable statements.

3. Final Answer:

   SyntaxKind.VariableStatement -> Option A

4. Quick Check:

   First statement kind = VariableStatement [OK]

Hint: Statements array holds top-level code pieces; kind shows their type [OK]

Common Mistakes:

• Expecting the value 5 to be printed
• Confusing statement kind with identifier kind
• Assuming undefined because of missing imports

4.

Consider this code snippet:

const sourceFile = ts.createSourceFile('file.ts', 'const a = 10;', ts.ScriptTarget.Latest);
const firstStatement = sourceFile.statements[0];
console.log(firstStatement.name.text);

What is the error in this code?

medium

A. firstStatement has no property name

B. sourceFile is not created correctly

C. text is not a valid property

D. No error, code runs fine

Solution

1. Step 1: Check the type of firstStatement

   firstStatement is a VariableStatement node, which does not have a direct name property.

2. Step 2: Understand how to access variable name

   The variable name is inside firstStatement.declarationList.declarations[0].name, not directly on firstStatement.

3. Final Answer:

   firstStatement has no property name -> Option A

4. Quick Check:

   VariableStatement lacks direct name property [OK]

Hint: Variable names are nested inside declarations, not on statement directly [OK]

Common Mistakes:

• Accessing name directly on VariableStatement
• Assuming sourceFile creation is wrong
• Confusing property names on nodes

5.

You want to write a function using the TypeScript compiler API that extracts all variable names from a given source code string. Which approach is best?

1. Create a SourceFile from the code string.
2. Traverse its statements and declarations.
3. Collect names from variable declarations.

Which code snippet correctly starts this process?

function getVariableNames(code: string): string[] {
  const sourceFile = ts.createSourceFile('temp.ts', code, ts.ScriptTarget.Latest);
  const names: string[] = [];
  sourceFile.statements.forEach(statement => {
    if (ts.isVariableStatement(statement)) {
      statement.declarationList.declarations.forEach(decl => {
        if (ts.isIdentifier(decl.name)) {
          names.push(decl.name.text);
        }
      });
    }
  });
  return names;
}

hard

A. Incorrect because it uses forEach on a non-iterable

B. Fails because it does not parse the code into a SourceFile

C. Correctly traverses variable declarations and extracts names

D. Wrong because it pushes declaration nodes instead of names

Solution

1. Step 1: Verify SourceFile creation

   The code correctly creates a SourceFile from the input string.

2. Step 2: Check traversal and extraction logic

   It loops over statements, filters variable statements, then loops declarations to extract identifier names properly.

3. Final Answer:

   Correctly traverses variable declarations and extracts names -> Option C

4. Quick Check:

   Traversal and extraction logic is correct [OK]

Hint: Traverse statements, check variable statements, then extract names [OK]

Common Mistakes:

• Not creating SourceFile before traversal
• Trying to loop on non-iterable objects
• Pushing nodes instead of text names