如何在Angular中使用全局扩展，解决String原型方法不存在的类型报错

你遇到的类型报错是因为TypeScript没有全局识别到你对String接口的扩展声明，只有当类型声明被纳入TS编译全局作用域、同时原型方法在项目启动前完成注册，才能正常调用扩展方法。

按以下步骤调整即可解决报错：

1. 新建专门的扩展文件
   在src目录下新建string.extensions.ts，写入完整的扩展逻辑，避免类型声明和实现分离：

declare global {
  interface String {
    toNumber(): number | null;
  }
}

// 避免重复注册
if (!String.prototype.toNumber) {
  Object.defineProperty(String.prototype, 'toNumber', {
    value: function (this: string) {
      const num = Number(this);
      // 修复原逻辑缺陷：原写法会把'0'这类合法值判定为false返回null
      return isNaN(num) ? null : num;
    },
    enumerable: false // 符合原生原型方法不可枚举的特性
  });
}

export {}; // 保证该文件被识别为模块，全局声明才会生效

2. 全局导入扩展
   在Angular项目入口文件main.ts的最顶部导入该扩展文件，保证应用启动前就完成原型注册：

import './string.extensions';
// 原有main.ts的其他逻辑保持不变
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
// ...

3. 验证tsconfig配置
   打开项目根目录的tsconfig.json，确认include配置包含了src下的d.ts和ts文件，默认Angular项目配置无需修改，如果你自定义过配置，需要保证包含以下规则：

{
  "include": ["src/**/*.d.ts", "src/**/*.ts"]
}

• 优先使用工具函数替代全局扩展：全局扩展原生原型会造成隐式依赖，还可能和第三方库、未来JS/TS官方新增的同名方法冲突。如果不是全项目高频使用的通用方法，建议单独封装工具函数，按需导入使用，没有全局污染风险。
• 必须做重复注册防护：所有原型扩展都要先判断方法是否已存在，避免覆盖其他实现导致不可预期的问题。
• 严格限制扩展数量：只给原生原型增加通用度极高的基础方法，业务相关逻辑不要放到全局原型中。
• 配套完整类型声明：所有扩展必须同步补充TypeScript类型声明，避免全局类型污染引发的隐性类型错误。

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