如何让TypeScript识别Angular中的全局对象SqPaymentForm？

我完全懂你在Angular项目里集成Square结账表单时的困扰——明明浏览器里已经加载了SqPaymentForm全局对象，但TypeScript就是不认，还抛出不存在的错误。这是因为TypeScript默认只识别标准Window接口的属性，第三方注入的全局对象需要我们手动扩展类型声明来让TypeScript“认识”它。

下面是具体的解决步骤：

1. 添加全局类型声明文件 #

在你的Angular项目中新建一个类型声明文件（比如src/types/square.d.ts，路径可以根据项目结构调整），内容如下：

declare global {
  interface Window {
    SqPaymentForm: any;
    // 如果你能找到Square官方提供的TypeScript类型定义，可以把`any`替换成具体类型，还能获得代码提示
  }
}

// 必须加上这行，确保文件被当作模块处理
export {};

2. 确保TypeScript加载这个声明文件 #

打开项目根目录的tsconfig.json，检查include数组是否包含了你的声明文件路径。如果是放在src/types下，只需要确保include里有"src/**/*.d.ts"即可：

{
  "compilerOptions": {
    // 其他配置...
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts"
  ]
}

3. 修正工厂函数的判断逻辑 #

你原来的代码里typeof window !== undefined有个小错误——typeof操作符返回的是字符串类型，所以应该和'undefined'比较：

export function getSquare() {
  return typeof window !== 'undefined' 
    ? window.SqPaymentForm
    : null;
}

可选：临时用类型断言快速解决 #

如果不想新建声明文件，也可以在使用时用类型断言绕过TypeScript的检查，但这种方式没有类型提示，不推荐长期使用：

export function getSquare() {
  return typeof window !== 'undefined' 
    ? (window as any).SqPaymentForm
    : null;
}

这样修改后，TypeScript就能正确识别window.SqPaymentForm了，你可以正常在Angular组件里注入SQUARE服务来使用Square的结账表单。

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