TypeScript compiler API basics - Mini Project: Build & Apply

TypeScript Compiler API Basics

📖 Scenario: You are building a simple tool that reads TypeScript code and extracts the names of all functions declared in it. This is useful for understanding code structure quickly.

🎯 Goal: Create a TypeScript program that uses the TypeScript compiler API to parse a given TypeScript source code string and list all function names declared in it.

📋 What You'll Learn

Create a variable holding TypeScript source code as a string

Set up a TypeScript compiler API source file from the string

Use a function to visit nodes and find function declarations

Print the list of function names found

💡 Why This Matters

🌍 Real World

Developers use the TypeScript compiler API to build tools that analyze or transform TypeScript code automatically.

💼 Career

Understanding the compiler API is useful for roles in tooling, code analysis, and advanced TypeScript development.

1

Create TypeScript source code string

Create a variable called sourceCode and set it to the string containing these exact lines of TypeScript code with line breaks:
function greet() { console.log('Hello'); }
function add(a: number, b: number) { return a + b; }

Typescript

const sourceCode = `function greet() { console.log('Hello'); }\nfunction add(a: number, b: number) { return a + b; }`;
// Your code here

Hint

Use backticks ` to create a multi-line string in TypeScript.

2

Create a SourceFile using TypeScript compiler API

Import ts from 'typescript' and create a variable called sourceFile by calling ts.createSourceFile with these exact arguments:
- 'temp.ts' as fileName
- sourceCode as sourceText
- ts.ScriptTarget.Latest as languageVersion
- true as setParentNodes

Typescript

import ts from 'typescript';
const sourceCode = `function greet() { console.log('Hello'); }
function add(a: number, b: number) { return a + b; }`;
// Your code here

Hint

Use ts.createSourceFile to parse the code string into a source file object.

3

Write a function to find function declarations

Create a function called findFunctionNames that takes node of type ts.Node and an array names of strings. Inside it, use ts.forEachChild to visit each child node. If a child node is a function declaration (ts.isFunctionDeclaration(child)) and has a name, push the name text to names. Recursively call findFunctionNames on each child node.

Typescript

function findFunctionNames(node: ts.Node, names: string[]) {
    // Your code here
}

Hint

Use recursion and ts.forEachChild to visit all nodes and collect function names.

4

Collect and print function names

Create an empty array called functionNames. Call findFunctionNames with sourceFile and functionNames. Then print functionNames using console.log.

Typescript

const functionNames: string[] = [];
// Your code here

Hint

Remember to call the function and then print the array.

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