Augmenting third-party libraries in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code with module augmentation?

Consider the following TypeScript code that augments a third-party library's interface. What will be logged to the console?

Typescript

import 'lodash';

declare module 'lodash' {
  interface LoDashStatic {
    customMethod(): string;
  }
}

import _ from 'lodash';

_.customMethod = () => 'Augmented!';

console.log(_.customMethod());

A TypeScript compile error: Property 'customMethod' does not exist on type 'LoDashStatic'.

B "undefined"

C Runtime error: _.customMethod is not a function

D "Augmented!"

💡 Hint

Think about how module augmentation adds new members to existing interfaces.

The code uses module augmentation to add customMethod to the LoDashStatic interface. Then it assigns a function to _.customMethod. This works both at compile time and runtime, so the output is the string returned by the function.

🧠 Conceptual

intermediate

Which statement about TypeScript module augmentation is true?

Choose the correct statement about augmenting third-party libraries in TypeScript.

A Module augmentation automatically merges runtime implementations without extra code.

B Module augmentation can add new properties to existing interfaces without modifying original source code.

C Module augmentation only works with classes, not interfaces.

D Module augmentation requires changing the original library's source files.

💡 Hint

Think about how TypeScript allows extending types without touching original files.

Module augmentation lets you add new properties or methods to existing interfaces or modules without modifying the original source code. It works by merging declarations at compile time.

🔧 Debug

advanced

Why does this module augmentation cause a TypeScript error?

Given this code snippet, why does TypeScript report an error?

Typescript

import 'express';

declare module 'express' {
  interface Request {
    userId: number;
  }
}

import express from 'express';
const app = express();

app.use((req, res, next) => {
  console.log(req.userId);
  next();
});

A The 'userId' property is not optional, causing runtime errors.

B The module 'express' does not export a 'Request' interface to augment.

C The augmentation is missing an import of 'express' before declaration.

D The augmentation syntax is invalid; interfaces cannot be augmented.

💡 Hint

Check if the module is imported before augmentation.

To augment a module, TypeScript requires the module to be imported before the declare module block. Without importing, the augmentation is not linked to the actual module, causing errors.

📝 Syntax

advanced

Which option correctly augments a third-party library's namespace in TypeScript?

Choose the correct syntax to add a new function logInfo to the console namespace.

A

declare global {
  namespace console {
    function logInfo(message: string): void;
  }
}

B

declare module 'console' {
  export function logInfo(message: string): void;
}

C

declare namespace console {
  function logInfo(message: string): void;
}

D

declare interface console {
  logInfo(message: string): void;
}

💡 Hint

Think about how to augment global namespaces in TypeScript.

To augment a global namespace like console, you wrap the namespace declaration inside declare global. This merges the new function into the existing global namespace.

🚀 Application

expert

After augmenting a third-party library, what is the type of this variable?

Given the following augmentation and usage, what is the type of result?

Typescript

import 'moment';

declare module 'moment' {
  interface Moment {
    isWeekend(): boolean;
  }
}

import moment from 'moment';

const now = moment();
const result = now.isWeekend();

A boolean

B Moment

C undefined

D TypeScript error: Property 'isWeekend' does not exist on type 'Moment'.

💡 Hint

Consider the return type of the added method in the interface.

The augmentation adds isWeekend() returning a boolean to the Moment interface. Calling now.isWeekend() returns a boolean, so result is of type boolean.