如何在TypeScript/TSX中使用外部命名空间获取类型？

开发者阿泽

2026-8-1

解决方案

一、利用已有@types包的命名空间类型（以Facebook为例）

你安装的@types/facebook-js-sdk已经内置了完整的类型定义，其中FB.Instance就是window.FB对应的类型。直接在代码中引用这个类型即可完成标注：

// 仅导入类型，不会产生运行时代码
import type { FB } from 'facebook-js-sdk';

class Facebook {
  private fb: FB.Instance;

  // 给构造函数参数标注类型
  constructor(fb: FB.Instance) {
    this.fb = fb;
  }

  // 示例方法：自动获得完整类型提示
  async getLoginStatus() {
    const response = await this.fb.getLoginStatusAsync();
    console.log(response.status);
  }
}

// 实例化时直接传入window.FB，类型完全匹配
const fbClient = new Facebook(window.FB);

二、无官方@types包的情况（如Google、Intercom）

如果第三方库没有对应的DefinitelyTyped类型包，需要自己补充全局类型声明：

在项目根目录创建一个.d.ts文件（比如global-types.d.ts）
扩展Window接口，声明外部脚本挂载的全局变量类型：

// global-types.d.ts
declare global {
  interface Window {
    // Intercom类型示例，可根据官方文档细化参数/返回值
    Intercom: (action: 'boot' | 'show' | 'hide', options?: Record<string, any>) => void;
    // Google Analytics类型示例
    gtag: (command: 'config' | 'event', targetId: string, params?: Record<string, any>) => void;
  }
}

// 必须添加此语句，让TypeScript识别为模块
export {};

之后在代码中使用时，可直接标注类型：

class IntercomService {
  private intercom: typeof window.Intercom;

  constructor(intercom: typeof window.Intercom) {
    this.intercom = intercom;
  }

  boot(userData: { email: string; name: string }) {
    this.intercom('boot', userData);
  }
}

const intercomService = new IntercomService(window.Intercom);