Dynamic imports with types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to dynamically import the module.

Typescript

const module = await import([1]);

Drag options to blanks, or click blank then click option'

A'./myModule'

BmyModule

Cimport('./myModule')

D'myModule.js'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable without quotes.

Trying to call import() inside import().

Using a file extension when not needed.

The import() function requires a string path to the module. So, './myModule' is correct.

2fill in blank

medium

Complete the code to import the type MyType from the module.

Typescript

import type { [1] } from './myModule';

Drag options to blanks, or click blank then click option'

AMyType

BmyType

Cmytype

DTypeMy

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase letters for type names.

Confusing variable names with type names.

TypeScript is case-sensitive. The type name is MyType exactly as declared.

3fill in blank

hard

Fix the error in the dynamic import with type assertion.

Typescript

const mod = await import('./myModule') as [1];

Drag options to blanks, or click blank then click option'

AMyType

BPromise<MyType>

CModuleType

Dtypeof import('./myModule')

Attempts:

3 left

💡 Hint

Common Mistakes

Asserting the type directly without typeof.

Using the type of the exported member instead of the module.

When asserting the type of a dynamically imported module, use typeof import('./myModule'), because the import returns a module object.

4fill in blank

hard

Fill both blanks to correctly type the dynamically imported function and call it.

Typescript

const [1] = (await import('./utils')).[2];
const result = await myFunc(5);

Drag options to blanks, or click blank then click option'

AmyFunc

Bcalculate

Ccompute

Dprocess

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the variable and the imported function.

Using a function name that does not exist in the module.

The function exported is named myFunc. So both blanks should be myFunc to assign and call it correctly.

5fill in blank

hard

Fill all three blanks to dynamically import a module, extract a typed function, and call it with a typed argument.

Typescript

import type { [1] } from './math';
const { [2] } = await import('./math') as [3];
const output = [2](10);

Drag options to blanks, or click blank then click option'

ACalculateFn

Bcalculate

Ctypeof import('./math')

DMathType

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up type and function names.

Not using typeof import() for module typing.

First, import the type CalculateFn. Then extract the function calculate from the module. Finally, assert the module type with typeof import('./math').