Overview

Declaration merging is a unique TypeScript feature that allows developers to combine two or more separate declarations declared with the same name into a single definition. This concept is crucial in TypeScript for extending existing types and interfaces, enabling more flexible and modular code architecture.

Key Concepts

1. Interface Merging: Combining multiple interface declarations with the same name into a single interface.
2. Module Merging: Merging of multiple module declarations with the same path.
3. Namespace Merging: Combining multiple namespace declarations with the same name into a single namespace.

Common Interview Questions

Basic Level

1. What is declaration merging in TypeScript?
2. How do you merge interface declarations in TypeScript?

Intermediate Level

3. Can you merge an interface with a class in TypeScript? Provide an example.

Advanced Level

4. Discuss how declaration merging can be used to extend external library interfaces without modifying the original source code.

Detailed Answers

1. What is declaration merging in TypeScript?

Answer: Declaration merging is a TypeScript feature that allows the compiler to combine two or more separate declarations declared with the same name into a single definition. This capability is particularly useful for adding or modifying properties and methods in existing interfaces or classes. It supports interfaces, namespaces, and modules, enabling more extensible and maintainable code structures.

Key Points:
- Combines like-named declarations into one.
- Supports interfaces, namespaces, and modules.
- Facilitates extensible and maintainable code.

Example:

interface Product {
    id: number;
    name: string;
}

interface Product {
    price: number;
}

// The merged interface Product now contains id, name, and price.
let item: Product = { id: 1, name: "Laptop", price: 1200 };

2. How do you merge interface declarations in TypeScript?

Answer: In TypeScript, you can merge interface declarations simply by declaring two or more interfaces with the same name. The TypeScript compiler automatically merges the interfaces into a single interface that includes all properties from each declaration.

Key Points:
- Declare two or more interfaces with the same name.
- TypeScript compiler merges them into a single interface.
- Merged interface contains all properties from each declaration.

Example:

interface User {
    name: string;
}

interface User {
    email: string;
}

// The merged User interface now has both name and email properties.
const user: User = { name: "John Doe", email: "john.doe@example.com" };

3. Can you merge an interface with a class in TypeScript? Provide an example.

Answer: Yes, in TypeScript, you can merge an interface with a class. When an interface and a class share the same name, TypeScript merges the interface's declarations into the class. This allows you to declare additional properties or methods that the class must implement or already implements.

Key Points:
- Interface and class with the same name can be merged.
- Merging adds the interface's members to the class.
- Useful for declaring extra properties or methods on a class.

Example:

interface Clock {
    currentTime: Date;
    setTime(d: Date): void;
}

class Clock {
    currentTime: Date = new Date();
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) {}
}

// The Clock class now includes both the properties and methods defined in the Clock interface.

4. Discuss how declaration merging can be used to extend external library interfaces without modifying the original source code.

Answer: Declaration merging allows developers to extend or modify the interfaces of external libraries without altering the original source code. By declaring a new interface with the same name as an existing interface from a library, you can add new properties or methods. TypeScript automatically merges these declarations, enabling the extension of library interfaces in a type-safe manner.

Key Points:
- Extend or modify library interfaces without changing original code.
- Declare a new interface with the same name to add properties or methods.
- TypeScript merges these declarations, enhancing library interfaces.

Example:

// Assuming an external library has the following interface:
// interface LibraryOptions {
//     option1: string;
// }

// You can extend this interface as follows without modifying the library:
interface LibraryOptions {
    option2: number;
}

// Now, when using the LibraryOptions interface, it includes both option1 and option2.
const options: LibraryOptions = { option1: "value1", option2: 100 };

This strategy is particularly useful for adding type definitions for custom plugins or extensions to existing libraries, ensuring type safety and code maintainability.