Dynamic imports with types in Typescript - Step-by-Step Execution

Concept Flow - Dynamic imports with types

Start

↓

Call import()

↓

Load module asynchronously

↓

Module loaded

↓

Use module with typed import

↓

End

Dynamic imports load modules asynchronously and allow using types to keep code safe.

Execution Sample

Typescript

async function loadModule() {
  const mod = await import('./mathUtils');
  const result: number = mod.add(2, 3);
  console.log(result);
}

This code dynamically imports a module and uses a typed function from it.

Execution Table

Step	Action	Evaluation	Result
1	Call loadModule()	Starts async function	Function started
2	Execute import('./mathUtils')	Loads module asynchronously	Promise pending
3	Await import resolves	Module loaded	mod = { add: function }
4	Call mod.add(2, 3)	2 + 3	5
5	Assign result: number = 5	Type checked as number	result = 5
6	console.log(result)	Prints to console	Output: 5
7	Function ends	No more code	End

💡 Function completes after logging the result.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
mod	undefined	{ add: function }	{ add: function }	{ add: function }
result	undefined	undefined	5	5

Key Moments - 3 Insights

Why do we use await with import()?

Because import() returns a Promise that resolves when the module loads, as shown in step 3 of the execution_table.

How does TypeScript know the type of mod.add?

TypeScript uses the module's type definitions to check that mod.add returns a number, as seen in step 5 where result is typed number.

What happens if the module path is wrong?

The Promise from import() rejects, causing an error before step 4, so the function would not proceed to call mod.add.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'mod' after step 3?

A undefined

B { add: function }

C number 5

D Promise

💡 Hint

Check the 'Result' column in step 3 of the execution_table.

At which step does the code print the output to the console?

A Step 6

B Step 4

C Step 5

D Step 7

💡 Hint

Look for 'console.log' action in the execution_table.

If we remove 'await' before import(), what changes in the execution_table?

A Step 6 would print undefined

B Step 4 would execute normally

C Step 3 would show mod as a Promise instead of the module object

D No change at all

💡 Hint

Without await, import() returns a Promise, not the resolved module (see step 3).

Concept Snapshot

Dynamic imports use import() to load modules asynchronously.
Use await to get the module object.
TypeScript types the imported module for safety.
Example: const mod = await import('./mod');
Then use mod's exports with types.
Errors happen if module path is wrong.

Full Transcript

This example shows how dynamic imports work in TypeScript. The function loadModule calls import() with await to load a module asynchronously. When the module loads, it returns an object with exported functions, here 'add'. TypeScript knows the types from the module, so 'result' is typed as number. The code then calls mod.add(2, 3) and logs the result 5. The execution table traces each step: starting the function, loading the module, calling the function, and printing output. Variables 'mod' and 'result' change from undefined to their values as the code runs. Key moments clarify why await is needed, how types are known, and what happens if the module path is wrong. The quiz tests understanding of variable values and execution steps. The snapshot summarizes the syntax and behavior of dynamic imports with types.