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.

Practice

1. What is the main purpose of augmenting third-party libraries in TypeScript?

easy

A. To add or fix types without changing the original library code

B. To rewrite the entire library code for better performance

C. To remove unused functions from the library

D. To convert JavaScript code to TypeScript automatically

Solution

1. Step 1: Understand the goal of augmentation

   Augmentation is used to add or fix types in existing third-party libraries without modifying their source code.

2. Step 2: Compare options with this goal

   Only To add or fix types without changing the original library code matches this purpose. Other options describe different tasks unrelated to augmentation.

3. Final Answer:

   To add or fix types without changing the original library code -> Option A

4. Quick Check:

   Augmenting = add/fix types without code change [OK]

Hint: Augmenting means adding types, not changing code [OK]

Common Mistakes:

• Thinking augmentation rewrites library code
• Confusing augmentation with code conversion
• Assuming augmentation removes functions

2. Which syntax correctly starts a module augmentation for a library named my-lib?

easy

A. extend module 'my-lib' { }

B. module 'my-lib' { }

C. augment module 'my-lib' { }

D. declare module 'my-lib' { }

Solution

1. Step 1: Recall correct augmentation syntax

   TypeScript uses declare module 'library-name' { } to augment modules.

2. Step 2: Check options for this syntax

   Only declare module 'my-lib' { } uses declare module correctly. Others use invalid keywords.

3. Final Answer:

   declare module 'my-lib' { } -> Option D

4. Quick Check:

   Use declare module for augmentation [OK]

Hint: Always start with declare module 'library-name' [OK]

Common Mistakes:

• Omitting the declare keyword
• Using wrong keywords like augment or extend
• Using module without declare

3. What will be the output of this TypeScript code after augmenting the lodash library to add a new method double to its LoDashStatic interface?

declare module 'lodash' {
  interface LoDashStatic {
    double(n: number): number;
  }
}

import _ from 'lodash';

console.log(_.double(4));

medium

A. Runtime error: _.double is not a function

B. 8

C. TypeScript error: Property 'double' does not exist on type 'LoDashStatic'

D. 4

Solution

1. Step 1: Understand augmentation effect

   Augmentation adds type info but does not add actual implementation code.

2. Step 2: Analyze runtime behavior

   Since _.double is not implemented, calling it causes a runtime error.

3. Final Answer:

   Runtime error: _.double is not a function -> Option A

4. Quick Check:

   Augmentation adds types only, no code [OK]

Hint: Augmentation adds types, not code--runtime error if method missing [OK]

Common Mistakes:

• Assuming augmentation adds implementation automatically
• Expecting TypeScript error instead of runtime error
• Confusing type addition with code addition

4. Identify the error in this module augmentation code for express that tries to add a new property userId to the Request interface:

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

// Usage
import express from 'express';
const app = express();
app.use((req, res, next) => {
  console.log(req.userId);
  next();
});

medium

A. The import statement should use require instead of import

B. The property userId must be optional with a question mark

C. The module name should be 'express-serve-static-core' instead of 'express'

D. The interface Request cannot be augmented

Solution

1. Step 1: Check correct module for Request interface

   In Express, the Request interface is declared in 'express-serve-static-core', not directly in 'express'.

2. Step 2: Understand augmentation target

   To augment Request, you must declare module 'express-serve-static-core', or augmentation won't apply correctly.

3. Final Answer:

   The module name should be 'express-serve-static-core' instead of 'express' -> Option C

4. Quick Check:

   Augment correct module name for interface [OK]

Hint: Augment the exact module where interface is declared [OK]

Common Mistakes:

• Augmenting wrong module name
• Making property optional unnecessarily
• Thinking interface cannot be augmented

5. You want to augment the react-router-dom library to add a new optional property meta of type { requiresAuth: boolean } to the RouteProps interface. Which code snippet correctly achieves this and ensures TypeScript recognizes the new property?

hard

A. interface RouteProps { meta?: { requiresAuth: boolean }; }

// No module declaration needed

B. declare module 'react-router-dom' { interface RouteProps { meta?: { requiresAuth: boolean }; } }

// Then use

C. declare module 'react-router' { interface RouteProps { meta?: { requiresAuth: boolean }; } }

// Wrong module name

D. declare global { interface RouteProps { meta?: { requiresAuth: boolean }; } }

// Incorrect global augmentation

Solution

1. Step 1: Identify correct module to augment

   The RouteProps interface is declared in 'react-router-dom', so we must augment that module.

2. Step 2: Write augmentation with optional property

   Use declare module 'react-router-dom' and add meta?: { requiresAuth: boolean } inside RouteProps.

3. Final Answer:

   declare module 'react-router-dom' { interface RouteProps { meta?: { requiresAuth: boolean }; } } -> Option B

4. Quick Check:

   Augment correct module with optional property [OK]

Hint: Augment exact module and interface with declare module [OK]

Common Mistakes:

• Augmenting wrong module name
• Not using declare module syntax
• Adding property outside interface