电子支付平台 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,都可以从这些新的类型定义中受益。”