Adding a function to the prototype of a value is simple. For example:
Array.prototype.removeAt = function (index) {
if (index >= 0 && index < this.length) {
this.splice(index, 1);
}
return this;
};
declare global {
export interface Array<T> {
removeAt(index: number): Array<T>;
}
}
However, attempting to add a function to the prototype of an interface (which is essentially a class with a prototype) does not work as expected. For instance:
import { Router, RouteRecord } from 'vue-router';
Router.prototype.getRouteByName = function (this: Router, name: string): RouteRecord | undefined {
return this.getRoutes().find(m => m.name === name);
};
declare global {
export interface Router {
getRouteByName(name: string): RouteRecord | undefined;
}
}
Compiling this code results in an error:
'Router' only refers to a type, but is being used as a value here.Although 'Router' is exported as an interface, it actually represents a class in the JavaScript implementation. Is there a way to bypass this limitation and modify its prototype?
This is how Router is exported:
export interface Router {
// numerous members, see details at
// https://github.com/vuejs/router/blob/main/packages/router/src/router.ts#L189
}
What steps should I take to achieve this?