Web OTP API Typescript Typings issue - Missing Types in TypeScript

This is how I solved the issue:

Created a new folder with name typings and added it to typeRoots in tsconfig.json

"typeRoots": [      "typings",      "node_modules/@types"    ],

Created a new file polyfills.d.ts in folder typings and added below contents to the file:

interface CredentialRequestOptions {  otp: OTPOptions;}interface OTPOptions {  transport: string[];}

If you are wondering why I havent added other properties to the interface, that's because I already have:

"types": [      "@types/webappsec-credential-management"    ]

And "@types/webappsec-credential-management": "^0.5.1", in packages.json.

The support of OTP is yet to be added, and to addres the missing otp property I took benefit of TypeScript's feature Declaration Merging, now TypeScript compiler merges these two separate declarations (one defined in node_modules/@types and other in typings) declared with the same name into a single definition.

For further reading: https://justintimecoder.com/how-to-polyfil-missing-types-in-typescript/

Update

Below is the function that you can add to your Angular Component to make it work in your app:

async otpRequest() {    if ('OTPCredential' in window) {      const abortController = new AbortController();      let timer = setTimeout(() => {        abortController.abort();      }, 10 * 1000);      let o: CredentialRequestOptions = {        otp: { transport: ['sms'] },        signal: abortController.signal      };      const content = await window.navigator['credentials'].get(o);      //do what ever you want to do with the received code, probably send it to server    }  }

Call this function, then make http request to send sms code on user's mobile device.