Declaring modules in Typescript - Step-by-Step Execution

Concept Flow - Declaring modules

Start

↓

Write 'declare module'

↓

Add module name in quotes

↓

Add module content inside curly braces

↓

Use declared module in code

↓

Compile TypeScript

↓

Module types available

↓

End

This flow shows how to declare a module by naming it, adding its content, and then using it in TypeScript code.

Execution Sample

Typescript

declare module "my-lib" {
  export function greet(name: string): string;
}

const message = greet("Alice");

Declares a module named "my-lib" with a greet function, then calls greet with "Alice".

Execution Table

Step	Action	Code Evaluated	Result/Effect
1	Declare module named "my-lib"	declare module "my-lib" { ... }	Module "my-lib" types registered
2	Inside module, declare function greet	export function greet(name: string): string;	Function greet signature known
3	Use greet function	const message = greet("Alice");	Call greet with argument "Alice"
4	Compile code	TypeScript compiler checks types	No errors, greet recognized from declared module
5	Run code (assuming implementation exists)	message contains greeting string	message = greeting string from greet function

💡 Execution stops after compilation and usage of declared module types

Variable Tracker

Variable	Start	After Step 3	Final
message	undefined	string	string

Key Moments - 2 Insights

Why do we use 'declare module' instead of normal import?

Because 'declare module' tells TypeScript about types of a module that exists elsewhere, without importing actual code. See execution_table step 1 and 2.

What happens if the module implementation is missing?

TypeScript knows the types but at runtime the code must exist or it will fail. Declaration only helps compile-time checks (see step 5).

Visual Quiz - 3 Questions

Look at the execution_table, what does step 2 do?

A Declares the module name

B Declares the function signature inside the module

C Calls the greet function

D Compiles the code

💡 Hint

Check the 'Action' and 'Code Evaluated' columns in step 2 of execution_table

At which step does TypeScript check for type errors?

A Step 4

B Step 3

C Step 1

D Step 5

💡 Hint

Look for 'Compile code' and 'TypeScript compiler checks types' in execution_table

If we remove the 'declare module' block, what happens to the variable 'message'?

A It still works fine without errors

B It becomes undefined at runtime

C TypeScript will show an error because greet is unknown

D The code compiles but greet returns null

💡 Hint

Refer to variable_tracker and execution_table step 1 and 2 about module declaration

Concept Snapshot

declare module "module-name" {
  // module content: types, functions, interfaces
}

Use to tell TypeScript about external modules without importing code.
Helps with type checking when implementation is separate.
Must match actual module name used in imports.
Only affects compile-time, not runtime.

Full Transcript

This visual execution shows how to declare a module in TypeScript using 'declare module'. First, you write 'declare module' followed by the module name in quotes. Inside curly braces, you add the module's content like function signatures. Then you use the declared module in your code, for example calling a function from it. When you compile, TypeScript checks the types based on your declaration. The variable 'message' stores the result of calling the declared function. Key points include that 'declare module' only tells TypeScript about types, not actual code, so the real implementation must exist at runtime. The execution table traces each step from declaration to usage and compilation. The variable tracker shows how 'message' changes from undefined to the greeting string. The quizzes test understanding of declaration steps, compilation, and effects of missing declarations.