Dynamic imports with types in Typescript - Mini Project: Build & Apply

Dynamic imports with types

📖 Scenario: You are building a TypeScript app that loads different greeting messages dynamically based on user choice. Each greeting is in a separate module.

🎯 Goal: Create a TypeScript program that dynamically imports greeting modules with proper type annotations and displays the greeting message.

📋 What You'll Learn

Create a type for the greeting module's default export

Use dynamic import() with type annotations

Load a greeting module dynamically based on a variable

Print the greeting message from the imported module

💡 Why This Matters

🌍 Real World

Dynamic imports let apps load code only when needed, saving resources and speeding up startup.

💼 Career

Many modern web apps use dynamic imports with TypeScript to improve performance and maintain type safety.

1

Create greeting modules and type

Create a type called GreetingModule with a default string property. Then create two modules: hello.ts exporting default as "Hello, world!" and hi.ts exporting default as "Hi there!".

Typescript

# Define the GreetingModule type and create hello.ts and hi.ts modules
# Your code here

Need a hint?

Use export type GreetingModule = { default: string }; and create two files with export default strings.

2

Add a variable for the module name

Create a variable called moduleName and set it to the string "hello".

Typescript

export type GreetingModule = { default: string };

// hello.ts
export default "Hello, world!";

// hi.ts
export default "Hi there!";

// Create a variable called moduleName and set it to "hello"
# Your code here

Need a hint?

Use const moduleName = "hello"; to store the module name.

3

Dynamically import the module with type

Use import() with a type annotation to dynamically import the module named by moduleName. Store the result in a variable called greetingModule with type Promise<typeof import("./hello")>.

Typescript

export type GreetingModule = { default: string };

// hello.ts
export default "Hello, world!";

// hi.ts
export default "Hi there!";

const moduleName = "hello";

// Dynamically import the module with type annotation
# Your code here

Need a hint?

Use const greetingModule: Promise<typeof import("./hello")> = import(`./${moduleName}`); to dynamically import with types.

4

Print the greeting message

Use await to get the module from greetingModule and then print the default export using console.log. Wrap the code in an async function called showGreeting and call it.

Typescript

export type GreetingModule = { default: string };

// hello.ts
export default "Hello, world!";

// hi.ts
export default "Hi there!";

const moduleName = "hello";

const greetingModule: Promise = import(`./${moduleName}`);

// Create async function showGreeting to await greetingModule and print default export
# Your code here

Need a hint?

Use an async function to await the import and then console.log(mod.default).