Augmenting third-party libraries in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Typescript

declare module 'some-library' {
  interface User {
    [1]: string;
  }
}

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

Aemail

Bnickname

Cage

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name that already exists in the interface.

Forgetting to use 'declare module' syntax.

We add the 'nickname' property to the User interface to augment it.

2fill in blank

medium

Complete the code to augment the global Window interface with a new method.

Typescript

declare global {
  interface Window {
    [1](): void;
  }
}

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

AalertUser

BshowUser

CprintUser

DlogUser

Attempts:

3 left

💡 Hint

Common Mistakes

Adding a method with parameters when none are expected.

Not using 'declare global' to augment global interfaces.

We add the 'alertUser' method to the Window interface to augment it.

3fill in blank

hard

Fix the error in the module augmentation by completing the missing keyword.

Typescript

import 'some-library';

declare [1] 'some-library' {
  interface Config {
    debugMode: boolean;
  }
}

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

Ainterface

Bnamespace

Cclass

Dmodule

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'namespace' instead of 'module' for module augmentation.

Omitting the keyword entirely.

The 'module' keyword is required to augment an existing module.

4fill in blank

hard

Fill both blanks to correctly augment the Express Request interface with a new property.

Typescript

import 'express';

declare [1] 'express' {
  interface Request {
    [2]: string;
  }
}

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

Amodule

Bnamespace

CuserId

DsessionId

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'namespace' instead of 'module' for augmentation.

Choosing a property name unrelated to sessions.

Use 'module' to augment 'express' and add 'sessionId' property to Request interface.

5fill in blank

hard

Fill all three blanks to augment the React module by adding a new prop to the ButtonProps interface.

Typescript

import 'react';

declare [1] 'react' {
  interface ButtonProps {
    [2]?: boolean;
  }
  interface ButtonProps {
    [3]?: string;
  }
}

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

Amodule

Bdisabled

Cvariant

Dnamespace

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'namespace' instead of 'module'.

Choosing invalid or unrelated prop names.

Use 'module' to augment 'react' and add 'disabled' and 'variant' props to ButtonProps.