Angular + webauthn = 属性 'credentials' 在 'Navigator' 类型上不存在？

Question

我一直在尝试将 webauthn 添加到 Angular 应用程序中。这个 MDN 页面概述了必要的步骤:https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API

重要的是，使用 API 需要访问 navigator.credentials 。但是，当我尝试引用它时，Angular 不会编译。例如，这行代码:

await navigator.credentials.create({...});

...产生此错误:

error TS2339: Property 'credentials' does not exist on type 'Navigator'.

现在我知道我可以做这样的事情:

declare global {
  interface Navigator {
    credentials: {
      create(): void,
      get(): void
    }
  }
}

但是为整个 CredentialsContainer API 编写所有 TypeScript 真的很乏味。此外，有人已经在 DefinitelyTyped 中完成了所有工作，对吗？

所以我用 @types/webappsec-credential-management 将 npm install --save-dev @types/webappsec-credential-management 添加到我的项目中。

现在 Visual Studio Code 知道该做什么了；我有自动完成和一切。

但是 Angular 仍然无法编译。它给出了与上面相同的错误。

我需要做什么才能让 Angular 识别 navigator.credentials ？

Answer 1

您可以按照以下步骤进行:

npm install --save-dev @types/webappsec-credential-management

然后编辑 angular 的 <project>/src/tsconfig.app.json

{
  ...
  "compilerOptions": {
    ...
    "types": [
      "@types/webappsec-credential-management"
    ]
    ...
}

有必要编辑 angular 自己的 tsconfig.app.json，因为它将用于编译 angular 的代码。根 tsconfig.json 用于引导和通用(vscode) typescript 配置。因此，如果您只是将 @types/webappsec-credential-management 添加到您的类型中，它将在您的编辑器中被识别，但它会被 angular 自己的编译器忽略，从而产生此输入错误:
error TS2339: Property 'credentials' does not exist on type 'Navigator'. 。