Dynamic imports with types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this dynamic import with type assertion?

Consider this TypeScript code that dynamically imports a module and uses a type assertion. What will be logged to the console?

Typescript

async function loadModule() {
  const module = await import('./mathUtils') as { add: (a: number, b: number) => number };
  console.log(module.add(2, 3));
}
loadModule();

A SyntaxError

B TypeError at runtime

C undefined

D 5

💡 Hint

Think about what the type assertion does and what the imported module exports.

The dynamic import returns a promise resolving to the module object. The type assertion tells TypeScript the shape of the module, so calling add(2,3) returns 5.

❓ Predict Output

intermediate

What error does this dynamic import with wrong type cause?

What error will this TypeScript code produce at runtime?

Typescript

async function loadModule() {
  const module = await import('./stringUtils') as { multiply: (a: number, b: number) => number };
  console.log(module.multiply(2, 3));
}
loadModule();

A SyntaxError

B 5

C TypeError: module.multiply is not a function

D undefined

💡 Hint

The type assertion does not change the actual module content at runtime.

The module does not export multiply, so calling module.multiply causes a runtime TypeError.

🧠 Conceptual

advanced

Which statement about dynamic imports with types is true?

Choose the correct statement about using dynamic imports with TypeScript types.

A Type assertions help TypeScript check types but do not affect runtime values.

B Dynamic imports always return the exact type declared in the import statement.

C Type assertions on dynamic imports affect runtime behavior and prevent errors.

D Dynamic imports cannot be typed in TypeScript.

💡 Hint

Think about the difference between compile-time and runtime.

Type assertions only help TypeScript during compilation; they do not change the actual runtime module.

❓ Predict Output

advanced

What is the output of this dynamic import with conditional type?

What will be logged by this TypeScript code using dynamic import and conditional types?

Typescript

type ModuleType<T extends string> = T extends 'math' ? { add: (a: number, b: number) => number } : { greet: (name: string) => string };

async function load<T extends string>(name: T): Promise<ModuleType<T>> {
  return await import(`./${name}Utils`) as ModuleType<T>;
}

load('math').then(m => console.log(m.add(1, 2)));

A TypeError at runtime

B 3

C undefined

D SyntaxError

💡 Hint

Look at how the conditional type selects the module shape.

The conditional type selects the math module type, so add(1,2) returns 3.

🔧 Debug

expert

Why does this dynamic import with typescript fail at runtime?

This code tries to dynamically import a module and use a typed function, but it fails at runtime. Why?

Typescript

async function loadAndRun() {
  const mod = await import('./utils') as { default: (x: number) => number };
  console.log(mod(5));
}
loadAndRun();

A mod is the module object, not the default export function, so mod(5) causes TypeError

B Type assertion is wrong syntax causing SyntaxError

C The import path is invalid causing runtime error

D mod is undefined causing ReferenceError

💡 Hint

Remember how dynamic imports return module objects with exports as properties.

Dynamic import returns the module object. The default export is a property, so calling mod(5) is invalid.