How to check if PaymentRequest API is supported by browser within Typescript code

Question

Is there a way to force typescript's window object to resolve PaymentRequest property? Here is code example I have inside my angular component:

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

And here is an error I get:

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

Answer 1

You have a few options.

Ideal : Update TypeScript

Update to latest TypeScript as it ships with the definitions: https://github.com/microsoft/TypeScript/blob/20e2be1e1a0fb2a2f481410d24e4cae915e5ece7/lib/lib.dom.d.ts#L11549

Not Ideal 1: Add a local definition

Add a global.d.ts in which you extend interface Window to have the corresponding API, copy pasting from lib.d.ts mentioned above.

Not ideal as you will be doing a lot of copy paste that someone else will have to revert in the future if they decide to upgrade TypeScript.

Not Ideal 2: Just use an assertion

if ((window as any).PaymentRequest) {

Not ideal as assertions are potentially little white lies to the compiler.