如何为实际对应类的TypeScript Interface添加原型方法？

普通类型扩展原型方法的示例 #

给原生数组这类普通类型扩展原型方法的方式很直接，示例如下：

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>;
  }
}

问题场景 #

但针对Vue Router的Router接口尝试同样操作时，会触发编译错误：'Router' only refers to a type, but is being used as a value here.。原因是Router在TypeScript中被导出为接口类型，但底层对应JavaScript中的类，直接通过Router.prototype访问会被TypeScript拦截。

错误代码示例：

import { Router, RouteRecord } from 'vue-router';

// 此处会报错：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;
  }
}

可行解决方案 #

方案1：通过临时实例获取构造函数扩展原型 #

利用createRouter创建临时实例，通过实例的constructor拿到实际的Router类，再扩展其原型：

import { Router, RouteRecord, createRouter } from 'vue-router';
import { createWebHistory } from 'vue-router';

// 创建临时实例（仅用于获取构造函数，配置可极简）
const tempRouter = createRouter({
  history: createWebHistory(),
  routes: []
});
// 断言构造函数类型为Router对应的类
const RouterClass = tempRouter.constructor as typeof Router;

// 扩展原型方法
RouterClass.prototype.getRouteByName = function (this: Router, name: string): RouteRecord | undefined {
  return this.getRoutes().find(m => m.name === name);
};

// 类型声明，让TypeScript识别新增方法
declare global {
  export interface Router {
    getRouteByName(name: string): RouteRecord | undefined;
  }
}

方案2：直接导入实际的Router类（如果库支持） #

部分库会将类和接口同名导出，此时可以通过类型和值分离导入的方式获取Router类：

// 导入Router类型和实际的Router类
import type { Router, RouteRecord } from 'vue-router';
import { Router as RouterClass } from 'vue-router';

// 扩展原型方法
RouterClass.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;
  }
}

如果这种方式报错，说明Vue Router未导出Router类，改用方案1即可。

注意点 #

• 原型扩展代码要在应用初始化前执行（比如main.ts最开头），确保所有Router实例都能继承该方法。
• 扩展方法时通过this: Router标注this的类型，避免TypeScript类型校验错误。

内容的提问来源于stack exchange，提问作者huoshan12345