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.

Practice

1. What is the main purpose of using declare module in TypeScript?

easy

A. To import modules dynamically at runtime

B. To create new modules with implementation

C. To execute JavaScript code inside TypeScript files

D. To tell TypeScript about the shape of a module without actual code

Solution

1. Step 1: Understand the role of declare module

   This keyword is used to describe the shape or types of a module when TypeScript has no information about it.

2. Step 2: Differentiate from other module actions

   It does not import, execute, or create code but only declares types for existing modules.

3. Final Answer:

   To tell TypeScript about the shape of a module without actual code -> Option D

4. Quick Check:

   declare module = describe types only [OK]

Hint: Declare modules to describe types, not to run code [OK]

Common Mistakes:

• Thinking declare module imports or runs code
• Confusing declare module with creating actual modules
• Using declare module to execute JavaScript

2. Which of the following is the correct syntax to declare a module named "my-lib" in TypeScript?

easy

A. declare module 'my-lib' { export function foo(): void; }

B. module declare 'my-lib' { export function foo(): void; }

C. declare 'my-lib' module { export function foo(): void; }

D. module 'my-lib' declare { export function foo(): void; }

Solution

1. Step 1: Recall correct syntax for module declaration

   The correct syntax starts with declare module 'module-name' followed by curly braces containing declarations.

2. Step 2: Check each option's order and keywords

   Only declare module 'my-lib' { export function foo(): void; } uses the correct order: declare module 'my-lib' { ... }. Others mix keywords incorrectly.

3. Final Answer:

   declare module 'my-lib' { export function foo(): void; } -> Option A

4. Quick Check:

   declare module 'name' { ... } syntax [OK]

Hint: Start with 'declare module' then module name in quotes [OK]

Common Mistakes:

• Swapping 'module' and 'declare' keywords
• Omitting quotes around module name
• Using wrong keyword order

3. Given this declaration file:

declare module 'math-utils' {
  export function add(a: number, b: number): number;
}

What will be the output of this TypeScript code?

import { add } from 'math-utils';
console.log(add(2, 3));

medium

A. undefined

B. Runtime error: add is not a function

C. Compile error: Cannot find module 'math-utils'

D. 5

Solution

1. Step 1: Understand what declare module does

   It only tells TypeScript about types but does not provide actual implementation.

2. Step 2: Analyze runtime behavior

   Since no real code exists for 'math-utils', importing and calling add will cause a runtime error because add is undefined.

3. Final Answer:

   Runtime error: add is not a function -> Option B

4. Quick Check:

   declare module = types only, no code [OK]

Hint: Declare modules don't provide code, so runtime fails [OK]

Common Mistakes:

• Assuming declare module provides implementation
• Expecting correct output without real code
• Confusing compile-time types with runtime code

4. Identify the error in this module declaration:

declare module myLib {
  export const version: string;
}

medium

A. Missing function declaration

B. Cannot export constants in declare module

C. Module name must be in quotes

D. Syntax is correct, no error

Solution

1. Step 1: Check module name syntax

   Module names must be string literals in quotes, like 'myLib', not bare identifiers.

2. Step 2: Verify export syntax

   Exporting constants is allowed, so no error there.

3. Final Answer:

   Module name must be in quotes -> Option C

4. Quick Check:

   Module names need quotes [OK]

Hint: Always put module names in quotes in declare module [OK]

Common Mistakes:

• Omitting quotes around module name
• Thinking export const is invalid
• Assuming function declaration is mandatory

5. You want to declare a module "config" that exports an object with optional properties apiUrl (string) and timeout (number). Which declaration correctly models this?

hard

A. declare module 'config' {
export const settings: { apiUrl?: string; timeout?: number };
}

B. declare module 'config' {
export const settings: { apiUrl: string; timeout: number };
}

C. declare module 'config' {
export function settings(): { apiUrl?: string; timeout?: number };
}

D. declare module 'config' {
export let settings: { apiUrl: string; timeout?: number };
}

Solution

1. Step 1: Understand optional properties syntax

   Optional properties use the ? symbol after the property name.

2. Step 2: Match declaration to requirements

   declare module 'config' { export const settings: { apiUrl?: string; timeout?: number }; } correctly declares settings as an exported constant object with both properties optional.

3. Step 3: Check other options

   declare module 'config' { export const settings: { apiUrl: string; timeout: number }; } requires both properties (not optional). declare module 'config' { export function settings(): { apiUrl?: string; timeout?: number }; } exports a function, not an object. declare module 'config' { export let settings: { apiUrl: string; timeout?: number }; } makes apiUrl required, which is incorrect.

4. Final Answer:

   declare module 'config' { export const settings: { apiUrl?: string; timeout?: number }; } -> Option A

5. Quick Check:

   Optional props use ? in type declarations [OK]

Hint: Use ? after property name for optional fields [OK]

Common Mistakes:

• Forgetting ? for optional properties
• Using function instead of object export
• Making required properties when optional needed