【问题标题】：How to check if PaymentRequest API is supported by browser within Typescript code如何检查 Typescript 代码中的浏览器是否支持 PaymentRequest API
【发布时间】：2023-04-01 01:42:02
【问题描述】：

有没有办法强制 typescript 的 window 对象解析 PaymentRequest 属性？这是我的角度组件中的代码示例：

if (window.PaymentRequest) {
  // This browser supports Payment Request
} else {
  // Browser does not support Payment Request
}

这是我得到的一个错误：

error TS2339: Property 'PaymentRequest' does not exist on type 'Window'.

【问题讨论】：

可以升级到 TS 3.6 吗？它已添加到此处的窗口类型中。
不，目前这不是一个选项:(
这表示 PaymentRequest 是由 --lib dom 提供的。 npmjs.com/package/@types/paymentrequest 可以将 DOM 添加到编译器选项中吗？

标签： angular typescript browser payment-request-api

【解决方案1】：

你有几个选择。

理想：更新 TypeScript

更新到最新的 TypeScript，因为它附带定义：https://github.com/microsoft/TypeScript/blob/20e2be1e1a0fb2a2f481410d24e4cae915e5ece7/lib/lib.dom.d.ts#L11549

不理想1：添加局部定义

添加一个global.d.ts，在其中扩展interface Window 以获得相应的API，从上面提到的lib.d.ts 复制粘贴。

不理想，因为您将进行大量复制粘贴，如果其他人决定升级 TypeScript，将来他们将不得不恢复。

不理想 2：只使用断言

if ((window as any).PaymentRequest) {

不理想，因为断言是potentially little white lies to the compiler。

【讨论】：

谢谢，@basarat。似乎理想的选项目前不适用，但 Not Idial #2 现在可以工作:)