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.

Practice

1. What is the main benefit of using dynamic imports with types in TypeScript?

easy

A. They make the code run faster by compiling to machine code.

B. They load modules only when needed, improving app speed and type safety.

C. They automatically convert JavaScript to TypeScript.

D. They prevent any runtime errors without writing tests.

Solution

1. Step 1: Understand dynamic imports

   Dynamic imports load code only when it is needed, not all at once.

2. Step 2: Understand types with dynamic imports

   Using typeof import() adds type safety, helping catch errors early.

3. Final Answer:

   They load modules only when needed, improving app speed and type safety. -> Option B

4. Quick Check:

   Dynamic imports + types = faster and safer code [OK]

Hint: Dynamic imports delay loading; types keep code safe [OK]

Common Mistakes:

• Thinking dynamic imports compile code faster
• Confusing dynamic imports with automatic type conversion
• Believing dynamic imports prevent all runtime errors

2. Which of the following is the correct syntax to dynamically import a module named utils with types in TypeScript?

easy

A. const utils: typeof import('utils') = await import('utils');

B. const utils = await import('utils');

C. import utils from 'utils';

D. const utils = import('utils');

Solution

1. Step 1: Identify dynamic import syntax

   Dynamic imports use await import('module') inside async functions.

2. Step 2: Add type annotation

   Use const x: typeof import('module') to add types for the imported module.

3. Final Answer:

   const utils: typeof import('utils') = await import('utils'); -> Option A

4. Quick Check:

   Dynamic import with type annotation = const utils: typeof import('utils') = await import('utils'); [OK]

Hint: Use 'const x: typeof import() = await import()' [OK]

Common Mistakes:

• Omitting 'await' in dynamic import
• Using static import syntax for dynamic import
• Not adding type annotation for imported module

3. Consider this TypeScript code inside an async function:

const mod: typeof import('./math') = await import('./math');
const result = mod.add(2, 3);
console.log(result);

If ./math exports export function add(a: number, b: number) { return a + b; }, what will be the output?

medium

A. Type error at compile time

B. undefined

C. Runtime error: mod.add is not a function

D. 5

Solution

1. Step 1: Understand dynamic import with types

   The module is imported dynamically with correct typing, so mod.add is recognized as a function.

2. Step 2: Calculate the function call

   Calling mod.add(2, 3) returns 5, which is logged.

3. Final Answer:

   5 -> Option D

4. Quick Check:

   Dynamic import calls function correctly = 5 [OK]

Hint: Dynamic import with correct type calls function normally [OK]

Common Mistakes:

• Expecting undefined because of dynamic import
• Confusing runtime error with type error
• Forgetting to await the import

4. What is wrong with this TypeScript code snippet?

const mod: typeof import('./utils') = import('./utils');
console.log(mod.helper());

medium

A. Type annotation is incorrect; should not use typeof import().

B. Cannot call console.log inside async code.

C. Missing 'await' before import, so mod is a Promise, not the module.

D. Module './utils' does not exist.

Solution

1. Step 1: Check import usage

   Dynamic import returns a Promise, so it must be awaited to get the module.

2. Step 2: Identify error cause

   Without await, mod is a Promise, so calling mod.helper() causes an error.

3. Final Answer:

   Missing 'await' before import, so mod is a Promise, not the module. -> Option C

4. Quick Check:

   Dynamic import needs await to get module [OK]

Hint: Always await dynamic imports to get the module object [OK]

Common Mistakes:

• Forgetting to await dynamic import
• Misusing type annotation syntax
• Assuming import returns module directly

5. You want to dynamically import a module './config' that exports a default object with a property apiUrl. How do you correctly type and access apiUrl using dynamic imports in TypeScript?

hard

A. const config: typeof import('./config') = await import('./config'); console.log(config.default.apiUrl);

B. const config = await import('./config'); console.log(config.apiUrl);

C. const config: typeof import('./config') = await import('./config'); console.log(config.apiUrl);

D. const config = await import('./config'); console.log(config.default.apiUrl);

Solution

1. Step 1: Understand default exports in dynamic imports

   When a module exports default, it is accessed via the default property on the imported module object.

2. Step 2: Use type annotation and access property

   Typing with typeof import() is correct, and to get apiUrl, use config.default.apiUrl.

3. Final Answer:

   const config: typeof import('./config') = await import('./config'); console.log(config.default.apiUrl); -> Option A

4. Quick Check:

   Default export accessed via .default with type = const config: typeof import('./config') = await import('./config'); console.log(config.default.apiUrl); [OK]

Hint: Default exports accessed via .default after dynamic import [OK]

Common Mistakes:

• Accessing default export directly without .default
• Not using await with import
• Ignoring type annotation for imported module