how to add custom property and method to google map with TypeScript

I wanna add properties like id and label to MVCObject interface so that I can access that properties in Marker or Overlay, and method like isOpened to InfoWindow interface so that every infoWindow instance created by InfoWindow interface have that method.

in JavaScript, I can do this like

marker.id = id
marker.label = label
google.maps.InfoWindow.prototype.isOpened = () => {}

but the problem I don't know how to modify TypeScript about this.

I have two solutions that don't look ideal.

1. It seems that I can add properties to google.maps.MVCObject interface without modifying TypeScript using get, set method in MVCObject, but it's not ideal because this way ignores TypeScript.

2. Modifying node_modules/@types/google.maps is also another solution I have, but I don't know whether it's nice idea to directly change node_modules.

please let me know nicer ways to handle this TypeScript problem. thanks~!

I'm using react, @googlemaps/js-api-loader, and @types/google.maps

It not a good idea that to add properties to third-party library since you have to assign all object by your self, you could use Map or WeakMap to record the relationship of that object and properties defined by yourself.

And there is a way to extends the definition of package by declaration merging, create a d.ts file like the following:

declare module "<package_name_to_modify>" {
  interface TheInterface {
    // add what you want here
  }
}

export {}

Note that it won't works for type since it can not be merged.

If you insist to modify the definition (or it is a type) and you are using yarn as package manager, you could try yarn patch command, it will create a temporary package that can modify as you want. And remember to follow the instruction to save those changes