Angular中如何正确使用window全局Apollo对象及其内置类型

你之前写入的declare var Apollo;仅声明了一个类型为any的松散全局变量，TypeScript 无法识别其下挂载的方法、嵌套类型、构造函数定义，因此既不支持Apollo.Data这类类型标注，也无法对new Apollo.Geometry()这类实例化操作做类型校验。按以下步骤配置即可实现需求：

1. 编写完整的全局类型声明 #

打开Angular项目src目录下的typings.d.ts（Angular默认会自动识别src下的*.d.ts类型文件，无需额外引入），写入以下声明内容，可根据实际Apollo对象的API补全类型定义：

// 声明同名全局命名空间，承载Apollo下所有类型定义
declare namespace Apollo {
  // 定义你需要用到的嵌套类型，例如Data
  interface Data {
    // 按实际接口结构补全属性，示例加了索引签名兼容未明确声明的字段
    [key: string]: any;
  }

  // 定义可实例化的Geometry类类型
  class Geometry {
    constructor(geometryType?: string);
    // 补全类的实例方法、属性
    getBounds(): { lat: number; lng: number }[];
    [key: string]: any;
  }

  // 声明Apollo根对象下的方法
  function get(key?: string): any;
  [key: string]: any;
}

// 声明window对象上挂载的Apollo属性
declare interface Window {
  Apollo: typeof Apollo;
}

// 声明全局作用域可直接访问的Apollo变量，无需写window.Apollo前缀
declare var Apollo: typeof Apollo;

注意：该d.ts文件顶层不要写export/import关键字，否则会被TypeScript识别为模块文件，全局声明不会自动生效。如果需要在声明文件中引入其他类型，需把全局声明包裹在declare global {}块内。

2. 校验配置有效性 #

• 检查项目根目录tsconfig.app.json的include配置项，确保包含"src/**/*.d.ts"规则，Angular默认生成的配置已包含该规则，若之前手动修改过需补全。
• 配置完成后重启ng serve开发服务、重启IDE的TypeScript服务，即可同时支持两种使用方式：
  • 值层面调用：直接写Apollo.get()、const geo = new Apollo.Geometry()
  • 类型层面标注：直接写let el: Apollo.Data、function show(): Apollo.Data {}

可选优化 #

如果需要更严格的类型校验，可以删掉示例里的[key: string]: any索引签名，按照实际Apollo对象的全量API补全所有方法、属性、类的类型定义，就能获得完整的TS类型提示和校验能力。

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