为何TypeScript中navigator.credentials.create返回Credential而非PublicKeyCredential？

问题说明 #

我使用TypeScript 5.6（版本配置为"typescript": "~5.6"）开发WebAuthn功能时，发现navigator.credentials.create()的返回类型是Promise<Credential | null>，但根据WebAuthn规范，当调用该方法创建公钥凭证时，实际返回的应该是PublicKeyCredential（它继承自Credential）。

解决方案 #

1. 类型断言（快速处理） #

既然明确是调用WebAuthn的创建操作，直接用类型断言指定返回类型即可：

const publicKeyCredential = await navigator.credentials.create({
  publicKey: { /* 你的WebAuthn配置参数 */ }
}) as PublicKeyCredential | null;

2. 检查TypeScript库配置 #

确认tsconfig.json中包含dom和webworker库（WebAuthn的类型定义依赖这两个库）：

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM", "WebWorker"]
  }
}

如果缺少这些库，TypeScript可能无法正确识别PublicKeyCredential的类型。

3. 手动扩展类型定义（适配滞后场景） #

如果TypeScript内置类型定义未完全对齐最新规范，可以手动覆盖原有类型：

declare global {
  interface CredentialsContainer {
    create(options: { publicKey: PublicKeyCredentialCreationOptions }): Promise<PublicKeyCredential | null>;
  }
}

这段代码会针对WebAuthn的调用场景，修正create方法的返回类型。

原因说明 #

TypeScript的DOM类型定义是跟随浏览器实现和规范逐步更新的，可能存在一定滞后性。虽然PublicKeyCredential继承自Credential，但内置类型还没把navigator.credentials.create()的返回类型细化到具体子类，所以需要通过上述方法修正类型匹配问题。

内容的提问来源于stack exchange，提问作者xcsoft