Typescript Module Augmentation

Typescript module augmentation

Created By: chatGPT

TypeScript module augmentation allows you to extend existing modules by adding new functionality or types. This is particularly useful when working with third-party libraries where you may want to enhance or modify the TypeScript definition files. Here’s a quick guide on how to achieve that.

// First, create a new file for your module augmentation.
// For example, create `my-module.d.ts`.

declare module 'my-module' {
    interface ExistingInterface {
        newMethod(): string;
    }

    function newFunction(param: number): boolean;
}

In this example, we are augmenting the my-module module by adding a new method to an existing interface, as well as introducing a new function. It's important to encapsulate your declarations within declare module to let TypeScript know that you are augmenting a module.

// Now, in your application code, you can use the newly added interface and function.
import { ExistingInterface, newFunction } from 'my-module';

const obj: ExistingInterface = {
    newMethod: () => 'Hello, world!'
};

const result = newFunction(42); // Using the new function.

You can also augment global types. For instance, if you want to add a property to the Window interface, you can follow this approach:

// Create a new declaration file, e.g., `global.d.ts`.

declare global {
    interface Window {
        myCustomProperty: string;
    }
}

// Now you can use `window.myCustomProperty` in your code.
window.myCustomProperty = 'Hello!';
console.log(window.myCustomProperty); // Outputs: Hello!

Remember to ensure that your new types or methods do not conflict with existing definitions. Using module augmentation helps you maintain clean and organized code while allowing easy integration with existing libraries. By utilizing this feature effectively, you can customize libraries to suit your specific needs without altering their original source code.

// Always refer to the TypeScript documentation for the latest features and best practices.
// TypeScript documentation: https://www.typescriptlang.org/docs/.