Web OTP API Typescript Typings 问题 - TypeScript 中缺少类型 [英] Web OTP API Typescript Typings issue - Missing Types in TypeScript

问题描述

我正在遵循 https://web.dev/web-otp/ 上的说明在我的 Angular 应用程序中实现 Web OTP API.但是当添加下面的代码时，它会抛出错误:

I am following instructions available on https://web.dev/web-otp/ to implement Web OTP API in my Angular App. But when adding below code it throws error:

const content = await window.navigator['credentials'].get({
        otp: { transport: ['sms'] },
        signal: abortController.signal
      });

错误信息如下:

Error   TS2769  (TS) No overload matches this call.
  Overload 1 of 2, '(options?: CredentialRequestOptions): Promise<CredentialType>', gave the following error.
    Argument of type '{ otp: { transport: string[]; }; signal: AbortSignal; }' is not assignable to parameter of type 'CredentialRequestOptions'.
      Object literal may only specify known properties, and 'otp' does not exist in type 'CredentialRequestOptions'.
  Overload 2 of 2, '(options?: CredentialRequestOptions): Promise<Credential>', gave the following error.
    Argument of type '{ otp: { transport: string[]; }; signal: AbortSignal; }' is not assignable to parameter of type 'CredentialRequestOptions'.
      Object literal may only specify known properties, and 'otp' does not exist in type 'CredentialRequestOptions'.

我添加了 @types/webappsec-credential-management，但我相信它尚未更新以支持 otp.

I have @types/webappsec-credential-management added, but I believe its not yet updated to support otp.

有什么解决办法吗?

推荐答案

我是这样解决问题的:

创建一个名为 typings 的新文件夹并将其添加到 tsconfig.json

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

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

在文件夹 typings 中创建一个新文件 polyfills.d.ts 并将以下内容添加到文件中:

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"
    ]

和 @types/webappsec-credential-management":packages.json 中的^0.5.1"，.

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

尚未添加对 OTP 的支持，为了解决缺少的 otp 属性，我利用了 TypeScript 的功能 声明合并，现在 TypeScript 编译器合并了这两个单独的声明(一个在 node_modules/@typescode> 和 typings 中的其他)以相同的名称声明为一个定义.

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.

进一步阅读:https://justintimecoder.com/how-to-polyfil-missing-types-in-typescript/

更新

以下是您可以添加到 Angular 组件以使其在您的应用程序中运行的功能:

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
    }
  }

调用此函数，然后在用户的移动设备上发出http请求以发送短信代码.

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

这篇关于Web OTP API Typescript Typings 问题 - TypeScript 中缺少类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！