Square支付表单对象到Angular的全局参考答案

【问题标题】：Global Reference of Square payment form object into AngularSquare支付表单对象到Angular的全局参考
【发布时间】：2018-05-22 22:36:36
【问题描述】：

没有实现 Angular 4/5/6 的 Square 结帐表单，所以我试图通过创建一个测试组件来弄清楚这可能需要什么，但我不知道如何获得参考将他们的全局对象 SqPaymentForm 导入 Angular 并让 TypeScript 不会抛出错误，指出它在窗口对象上不存在 window.SqPaymentForm，因为它确实存在。

谁能告诉我如何让 TypeScript 识别 window.SqPaymentForm 的存在？

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [],
  providers: [
    { provide: 'SQUARE', useFactory: getSquare }
  ]
})
export class SquareModule { }

export function getSquare() {
  return (typeof window !== undefined) 
      // TypeScript indicates it doesn't exist on Window 
      ? window.SqPaymentForm 
      : null;
}

【问题讨论】：

这似乎是一个时间问题，你能推迟调用支付表单直到它被初始化吗？
它应该被加载。该脚本在 index.html 的中加载，但现在尝试将引用加载为提供程序。我希望我可以将它用作提供程序，并且当结帐组件加载时，我可以调用类似于他们的示例的东西，但由于 window.SqPaymentForm 根据 TypeScript 不存在而无法构建它来测试该理论跨度>

标签： typescript square

【解决方案1】：

发现我必须创建自己的类型，但不知道如何通过 .d.ts 加载它，所以现在，它在 Square 模块中声明：

declare global {
  interface Window {
    SqPaymentForm: any;
  }
}

或将window.SqPaymentForm 替换为：

(<any>window).SqPaymentForm

【讨论】：

感谢您跟进您的回答，以造福其他开发人员！
没问题@tristansokol，我真的很喜欢 Square，并希望将它们用于一切。现在他们的 POS 非常适合我们的客户，但是我在将其集成到 Angular SPA 中时遇到了一些问题，具体取决于如何使用 iframe 加载表单以及如何配置它们，这很容易使用 Stripe（甚至是 Paypal ) 比较。
你在使用autoBuild:false吗？这可以帮助控制页面计时。
这不是 Typescript 问题，而不是 Angular 特有的问题吗？只是比在 Typescript 中的情况，Window 类型上没有“SqPaymentForm”属性。