PayPal 使用 TypeScript 类型定义增强 JavaScript SDK

电子支付平台 PayPal 宣布已将 TypeScript 类型定义添加到其 JavaScript SDK paypal-js npm 包中。

“你知道 PayPal 为我们的 JavaScript SDK 发布了类型定义吗？而且你甚至不需要使用 TypeScript 就能受益。它们作为 Paypal-js npm 包的一部分。在这篇文章中，我将介绍该包的内容，以及如何利用 TypeScript 定义来加快 PayPal 应用程序的开发，无论你是否用 TypeScript 编写代码。”

 npm install @paypal/paypal-js

根据介绍，该 paypal-js 模块可以轻松地异步加载 PayPal JavaScript SDK。它提供了一个 loadScript() 方法，将 SDK的<script> tag 注入页面，并返回一个 promise，该 promise 将在脚本加载成功后解析。使用此实用程序可以更轻松地在参数更改（例如货币更改）时处理错误和重新加载脚本等任务。

一个基本的用法示例：

TypeScript Hints

只要在 loadScript 回调中键入 Paypal ，TypeScript autocompletion 就会出现。TS 和 JS 文件都支持此功能，如下所示：

TypeScript 能够展示可以传递给 paypal.Buttons() 的所有选项，包括其返回类型。createOrder 选项可以接收一个 Record（一个标准的 JS 对象）的回调，其中有一个 string 作为 key，和一个未知值；以及一个 CreateOrderActions 对象作为其第二个参数。它将返回一个持有字符串值的 Promise，也就是 order ID。

如果缺少任何内容或输入不正确，IDE 将会用红色波浪线标出错误。

将鼠标悬停在文本上将提供有关缺少参数的详细信息，在 createOrder 方法上单击 cmd 将使开发者直接进入 TypeScript 定义。

选择附加功能

虽然 JS SDK 类型定义相当全面，但实际支持的方法取决于传递到 JavaScript SDK <script> tag 的组件查询参数。默认情况下，Buttons是唯一受支持的方法。有关选择所需组件的更多详细信息，可参阅脚本配置指南。

没有 LoadScript 的 TypeScript 定义

loadScript() 方法并不是在应用程序中启用 TypeScript 定义的必要要求。如果你想避免将这种依赖性带入你的应用程序，可以使用 import type 语法而不是import。从而可在构建时获得所有 TypeScript 的好处，而不会增加包的大小。

从 paypal-js 模块 import 和 import type 时，都提供对 loadScript 模块和全局 window.paypal 变量的类型定义的访问。

进一步拥抱类型

为 PayPal JavaScript SDK 维护的所有类型都直接从 paypal-js 模块的根目录中导出，并且可以单独导入：

上图示例中，myIntent 变量和 postal_code 属性都输入错误，将显示类似于下面的错误：

有数十种与 PayPal 相关的类型，每种类型都有关于其属性和用途的大量文档，可以进一步帮助构建应用程序。

Paypal 开发者关系经理 Jamund Ferguson 总结称，“有了可用的类型提示，你在使用 PayPal JavaScript SDK 编写应用程序时会更有效率。你应该能够在不离开  IDE 的情况下完成更多工作，并且当你确实需要查看文档时，多数情况下你都可以在类型定义中找到所需的内容。其他情况下，则将提供指向给定方法的最佳文档的直接链接。无论你是否在应用程序中使用 TypeScript，都可以从这些新的类型定义中受益。”