Dynamic imports with types in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a dynamic import in TypeScript?

A dynamic import is a way to load modules asynchronously at runtime using the <code>import()</code> function, allowing code to be split and loaded only when needed.

intermediate

How do you specify types when using dynamic imports in TypeScript?

You can specify types by using import() with a type assertion or by importing the module type separately and then asserting the imported module's shape.

intermediate

Why use dynamic imports with types instead of static imports?

Dynamic imports help reduce initial load time by loading code only when needed, and using types ensures type safety and better developer experience with autocompletion and error checking.

beginner

Show a simple example of a dynamic import with type in TypeScript.

Example:<br><pre>type ModuleType = { greet: () => void };
const module = await import('./module') as ModuleType;
module.greet();</pre>

intermediate

What happens if the dynamically imported module does not match the expected type?

TypeScript will show a type error during development if the module does not match the expected type, helping catch mistakes early before running the code.

What syntax is used for dynamic imports in TypeScript?

A include('./module')

B require('./module')

C import './module'

D import('./module')

Dynamic imports use the import() function syntax to load modules asynchronously.

How can you ensure type safety when using dynamic imports?

A Use type assertions or import types separately

B Use <code>any</code> type

C Ignore types for dynamic imports

D Use <code>require()</code> instead

Type assertions or importing types separately help ensure type safety with dynamic imports.

What is a benefit of dynamic imports?

A Make code run synchronously

B Load code only when needed

C Disable type checking

D Increase initial bundle size

Dynamic imports allow loading code only when needed, improving performance.

Which keyword is NOT used with dynamic imports?

A require

B import

C await

D as

require is CommonJS syntax, not used for dynamic imports in TypeScript.

What does this code do? const mod = await import('./mod') as { foo: () => void };

A Imports './mod' synchronously

B Statically imports './mod' without types

C Dynamically imports './mod' and asserts it has a foo function

D Throws an error always

This code dynamically imports the module and asserts it has a function named foo.

Explain how to use dynamic imports with types in TypeScript and why it is useful.

Think about loading code only when needed and keeping type checks.

Describe a simple example of a dynamic import with a type assertion in TypeScript.

Show how to load a module and tell TypeScript what shape it has.