TypeScript中使用WebCrypto API如何兼顾编译与浏览器运行兼容？

你遇到的核心矛盾是：浏览器环境自带全局crypto对象，但TypeScript默认不识别它的类型；导入Node.js的crypto库能获取类型，但编译后的导入语句在浏览器里会报错。以下是几个直接可行的解决方法：

方法1：启用DOM标准库（最推荐） #

WebCrypto API的类型定义已经包含在TypeScript的DOM标准库中，只需在tsconfig.json里配置lib选项包含DOM：

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["ESNext", "DOM"],
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}

配置后，直接使用全局的crypto和crypto.CryptoKey类型都不会报错，不需要任何导入操作，编译后的代码也不会产生多余语句。

你的sign函数可以直接正常编写：

export function sign(privkey: crypto.CryptoKey, data: unknown) {
  const encodedData = new TextEncoder().encode(YSON.stringify(data)).buffer;
  return crypto.subtle.sign(
    { name: "ECDSA", hash: { name: "SHA-256" } },
    privkey,
    encodedData
  );
}

方法2：使用类型导入（仅获取类型不生成运行时代码） #

如果因为某些原因无法启用DOM库，可以用TypeScript 3.8+支持的import type语法，只导入类型而不生成运行时的导入语句：

// 仅导入类型，编译后这条语句会被移除
import type { webcrypto } from "crypto";

// 声明全局crypto对象的类型为Node.js webcrypto的类型
declare const crypto: webcrypto;

这样TypeScript能识别crypto的所有类型，同时编译后的JS文件不会包含这条导入，浏览器可以直接使用全局的crypto。

方法3：手动声明全局类型 #

创建一个全局类型声明文件（比如src/global.d.ts），手动告诉TypeScript全局crypto的类型：

declare global {
  // 直接使用DOM标准中的Crypto类型
  const crypto: Crypto;
}

export {};

这个方法本质和方法1类似，只是手动补充了类型声明，适合无法修改tsconfig的场景。

你之前尝试的动态导入没必要，因为浏览器环境下window.crypto必然存在，而且会导致类型丢失。上面的方法都能完美解决类型报错，同时保证编译后的代码在浏览器正常运行。

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