Why module augmentation is needed in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a new property to an existing module interface.

Typescript

declare module 'my-library' {
  interface Config {
    [1]: string;
  }
}

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

AconfigValue

BoldProperty

CnewProperty

DextraOption

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name that already exists in the interface.

Forgetting to use 'declare module' syntax.

Module augmentation allows you to add new properties like newProperty to existing interfaces.

2fill in blank

medium

Complete the code to correctly augment the module by adding a function.

Typescript

declare module 'my-library' {
  export function [1](): void;
}

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

AoldFunction

BnewFunction

CexistingFunction

DmainFunction

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that already exists in the module.

Not exporting the function properly.

The function newFunction is added to the module using augmentation.

3fill in blank

hard

Fix the error in the module augmentation syntax.

Typescript

declare module 'my-library' {
  interface Config {
    newOption: string
  [1]
}

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

A}

B;

C)

D]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a semicolon or parenthesis instead of a closing brace.

Forgetting to close the interface block.

The interface block must be properly closed with a curly brace }.

4fill in blank

hard

Fill both blanks to correctly augment a module by adding a new interface and exporting a function.

Typescript

declare module 'my-library' {
  interface [1] {
    enabled: boolean;
  }
  export function [2](): void;
}

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

ASettings

BConfig

CactivateFeature

DrunFeature

Attempts:

3 left

💡 Hint

Common Mistakes

Using interface names that conflict with existing ones.

Choosing function names that are not descriptive.

The interface Settings and function activateFeature are added to the module.

5fill in blank

hard

Fill all three blanks to augment a module by adding a new interface, a property, and a function.

Typescript

declare module 'my-library' {
  interface [1] {
    [2]: number;
  }
  export function [3](): void;
}

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

AOptions

Btimeout

Cinitialize

DSettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent names for interface and properties.

Not exporting the function properly.

The interface Settings is augmented with a timeout property and an initialize function is added.