如何扩展/合并@types/angular-route类型定义？为IRoute接口新增属性

我之前也踩过这个坑，要通过TypeScript声明合并扩展IRoute接口，关键是要精准匹配原类型的模块和命名空间结构，并且保证你的声明文件处于正确的上下文里。

正确的声明合并写法 #

首先，创建一个专门的类型扩展文件（比如angular-route-extensions.d.ts），内容如下：

import * as angular from 'angular';

declare module 'angular' {
  namespace route {
    interface IRoute {
      // 在这里添加你的自定义属性，比如：
      myCustomProp?: boolean;
      authRequired?: string[];
    }
  }
}

为什么之前的写法可能失败？ #

你大概率是踩了这几个常见的坑：

• 没有处于模块上下文：如果你的声明文件里没有import/export语句，TypeScript会把它当成全局声明，而@types/angular-route里的IRoute是在'angular'模块的route命名空间下的，全局声明无法和模块内的接口合并。
• 命名空间嵌套错误：比如误写成namespace angular.route而不是嵌套在declare module 'angular'内部，这样无法命中原接口的声明空间。
• TS配置没包含声明文件：要确保你的tsconfig.json的include数组里包含了这个.d.ts文件，或者它在TypeScript默认扫描的路径下。

验证是否生效 #

在你的业务代码里，就可以直接使用自定义属性了，TypeScript会自动识别：

import * as angular from 'angular';

angular.module('myApp', ['ngRoute'])
  .config(['$routeProvider', ($routeProvider: angular.route.IRouteProvider) => {
    $routeProvider.when('/dashboard', {
      templateUrl: 'dashboard.html',
      controller: 'DashboardCtrl',
      authRequired: ['admin', 'editor'] // 这里不会报类型错误
    });
  }]);

另外还要注意，确保@types/angular和@types/angular-route的版本相互兼容，版本不匹配也可能导致合并失效。

内容的提问来源于stack exchange，提问作者Snæbjörn