braintree - braintree.dropin v3 角度的类型

Question

我正在将 Braintree Drop-in v3 集成到一个带有包的角度应用程序中npm i -save braintree-web-drop-in。

然后我找到了包@types/braintree-web 我正在按照提到的例子here但是它似乎不包含对 Drop-in 功能的支持。显然这不是正确的包。

braintree.dropin.create({
  authorization: environment.braintreeKey,
  selector: '#dropin-container'
}, function (err, dropinInstance) {
  if (err) {
    // Handle any errors that might've occurred when creating Drop-in
    console.error(err);
    return;
  }
  submitButton.addEventListener('click', function () {
    dropinInstance.requestPaymentMethod(function (err, payload) {
      if (err) {
        // Handle errors in requesting payment method
      }

      // Send payload.nonce to your server
    });
  });
});

我有进口声明从“@types/braintree-web”导入 * 作为 braintree；

然后 braintree 被识别为全局命名空间，但是 braintree.dropin 仍然给我带来问题。

Typescript 编译器提示 dropin 对象:

类型“typeof braintree”上不存在属性“dropin”。

问题:

是否有一些简单的方法可以告诉 typescript 一切正常并继续使用它？还是我必须自己提供打字？或者它们已经存在于某个地方？或者使用 braintree-web-package 会更好？

Answer 1

我通过使用 import * as dropin from 'braintree-web-drop-in' 解决了这个问题； 这可能是因为我在 node_modules 中安装了 braintree 模块

它显然是 Typescript 基础知识，但我不知道的东西很无力。

由于这个问题是关于 UI 中的 braintree drop，这里是我的代码与 Typescript 和 angular 2 的结合。Javascript 对待 this 的方式与 Typescript 不同，所以你不应该使用 function Typescript 中的关键字。

  braintreeIsReady: boolean;
  dropIninstance: any;

  ngOnInit() {
    dropin.create({
      authorization: environment.braintreeKey,
      selector: '#dropin-container'
    }, (err, dropinInstance) => {
      if (err) {
        // Handle any errors that might've occurred when creating Drop-in
        console.error(err);
        return;
      }
      this.dropIninstance = dropinInstance;
      this.braintreeIsReady = true;
    });
  }

  pay() {
    this.dropIninstance.requestPaymentMethod((err, payload) => {
      if (err) {
        // deal with error
      }
      else {
        //send nonce to the server

      }
    });
  }