Web OTP API Typescript Typings 问题 - TypeScript 中缺少类型

Posted 2023-03-13

【中文标题】Web OTP API Typescript Typings 问题 - TypeScript 中缺少类型

【英文标题】：Web OTP API Typescript Typings issue - Missing Types in TypeScript

【发布时间】：2020-08-08 04:28:31

【问题描述】：

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

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。

有什么解决办法吗？

【参考方案1】：

这就是我解决问题的方法：

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

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

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

interface CredentialRequestOptions 
  otp: OTPOptions;


interface OTPOptions 
  transport: string[];

如果你想知道为什么我没有在界面中添加其他属性，那是因为我已经有了：

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

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

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

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

更新

以下是您可以添加到 Angular 组件以使其在您的应用中工作的功能：

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请求发送短信代码。