angular - Angular2 上的 braintree

Question

我正在尝试让 Braintree 客户端示例 ( https://developers.braintreepayments.com/start/hello-client/javascript/v3 ) 在 Angular2 上运行。我是 Angular2(和 Javascript)的新手。

首先，我不确定是否应该在 package.json 的依赖项下添加 "braintree-web": "^3.6.3"。或添加

<script src="https://js.braintreegateway.com/web/3.6.3/js/client.min.js"></script>

和

<script src="https://js.braintreegateway.com/web/3.6.3/js/hosted-fields.min.js"></script> 

在 index.html 下。我最终两者都做了。

在我运行 npm install 之后，如果我查看 node_modules/braintree-web，我只会看到 .js 文件。我没有看到任何 ts 文件。这是个问题吗？我不应该为此使用 braintree-web 吗？这个包是为 Angular1 写的吗？如果我确实必须使用 braintree-web，我是否还需要在我的 index.html 中包含这 2 个 js 文件？ braintree-web 是否已经包含它们？

在我的 payment.component.ts 文件中，我复制并粘贴了 Braintree 客户端代码:

import { braintree } from 'braintree-web/client';
...
ngOnInit() {
    var authorization = '...';
    var submit = document.querySelector('input[type="submit"]');

    braintree.client.create({
      authorization: authorization
    }, function (clientErr, clientInstance) {
      if (clientErr) {

当我尝试运行 tsc 时，出现以下错误:

app/admin/user/payment.component.ts(3,27): error TS2307: Cannot find module 'braintree-web/client'

我做错了什么？

Answer 1

由于 Angular2 是强类型的，您不能只使用 Braintree 提供的 Javascript 示例代码。您需要为所有这些函数定义类型。所以Trying to integrate braintree-web into Angular2是您需要安装 @types/braintree-web 的第一个线索(在 package.json 中)。这些不是官方的 Braintree 类型，而是来自 http://definitelytyped.org/ 的开源贡献.我向 Braintree 支持寻求帮助，他们提到你可以在 Angular2 中使用他们的 Javascript 示例代码，但你需要为每个参数指定一个类型。他们不能推荐来自 definitelytyped 的类型包，因为它不是他们自己的代码。

您不再需要在文件顶部导入任何内容，但您确实需要 index.html 中包含的 2 个 Braintree Javascript 文件。