Braintree-Web ApplePaySession 构造函数未定义答案

【问题标题】：Braintree-Web ApplePaySession constructor is undefinedBraintree-Web ApplePaySession 构造函数未定义
【发布时间】：2020-03-08 18:58:45
【问题描述】：

我正在尝试在使用 Typescript 的 react 项目中在结账时实施 Apple Pay。我已经安装了braintree-web 包并按照braintree 网站上的说明来初始化我的ApplePaySession。虽然 typescript 允许我编译项目，但在浏览器中我对 new ApplePaySession(3, paymentRequest); 的调用是未定义的。我绞尽脑汁，但我不明白出了什么问题。这是我如何初始化 ApplePay 的代码 sn-p。

import { applePay, ApplePayStatusCodes, ApplePaySession } from 'braintree-web';

...

beginApplePay() {
    if (!this.btApplePayInstance) {
      //throw an erro
    }

    const paymentRequest = this.createPaymentRequest();
    const session = this.createSession(paymentRequest);

    session && session.begin();
  }

  createSession(
    paymentRequest: braintree.ApplePayPaymentRequest
  ): braintree.ApplePaySession | null {
    let session: braintree.ApplePaySession;
    console.log('creating session');
    console.log('Sample payment request: ', paymentRequest);
    console.log(
      'Supports API v3: ' + window.ApplePaySession.supportsVersion(3)
    );


    try {
      debugger;
      session = new ApplePaySession(3, paymentRequest); //this is where it fails
      console.log(session);
    } catch (err) {
      console.log(err);
      //throw an error
      return null;
    }

这是我的浏览器所说的： TypeError: undefined is not a constructor (evaluating 'new braintree_web__WEBPACK_IMPORTED_MODULE_1__["ApplePaySession"](3, paymentRequest)')

我们将不胜感激任何对出了什么问题的洞察力。

【问题讨论】：

标签： reactjs typescript braintree applepay applepayjs

【解决方案1】：

我发现添加了

<script src="https://js.braintreegateway.com/web/3.55.0/js/apple-pay.min.js"></script>

在顶层 Js 文件为我工作，然后在使用会话时使用 @ts-ignore。

丑陋的解决方法我知道...如果您找到了更好的解决方案，请分享。

【讨论】：

【解决方案2】：

更新：我发现这是一个打字稿特定的问题。在braintree-web 的类型定义中，它们定义了ApplePaySession 的类型。构建项目时，浏览器认为ApplePaySession 是对braintree-web 中某个类的引用，而实际上它是对Safari 浏览器本机的ApplePaySession 的引用。

我找到的解决方案是使用 ApplePayWebJS 的类型并引用那里提供的ApplePaySession。然而，当试图让两个包的类型很好地结合在一起时，这确实产生了一些问题。

【讨论】：