How can I add a property to a library that uses its own interface?

Question

I am using the angular-gridster2 package, and I want girdsterItem to have two more properties in its interface to store those values. How can I do it? Since in their code they use their own property no matter how much I create an extended interface of theirs and use that one.

export interface GridsterItemCustomInterface extends GridsterItemComponentInterface {
  property1?: boolean;
  property2?: Config;
}

Answer 1

You can use TypeScript module augmentation to extend the existing interface.

import { GridsterItemComponentInterface } from 'angular-gridster2';

// Augment the module with the extended interface
declare module 'angular-gridster2' {
  interface GridsterItemComponentInterface {
    property1?: boolean;
    property2?: Config;
  }
}

// Now you can use it with the additional properties
export interface GridsterItemCustomInterface extends GridsterItemComponentInterface {
  property1?: boolean;
  property2?: Config;
}