React+TS项目使用bcryptjs遇类型错误及变量找不到问题如何解决？

1. 确认导入方式正确 #

bcryptjs的TypeScript类型支持两种导入方式，选其中一种即可：

• 默认导入（推荐）：

  import bcrypt from 'bcryptjs';
  // 调用示例
  const hashedPwd = bcrypt.hashSync('your-password', 10);
  

• 命名导入：

  import { hashSync, compareSync } from 'bcryptjs';
  // 调用示例
  const hashedPwd = hashSync('your-password', 10);
  

如果导入时写错方法名（比如把hashSync写成hash），会出现找不到变量的错误，务必对照官方API确认方法名称。

2. 检查TypeScript配置 #

打开项目根目录的tsconfig.json，确保以下配置正确：

{
  "compilerOptions": {
    // 确保typeRoots包含@types目录，让TypeScript能识别类型包
    "typeRoots": ["node_modules/@types"],
    // 或者直接将bcryptjs加入types数组，显式声明要加载的类型
    "types": ["bcryptjs"]
  }
}

配置修改后，重启IDE（比如VSCode）让配置生效。

3. 重新安装依赖并清除缓存 #

如果依赖安装不完整或缓存导致识别异常，执行以下步骤：

1. 卸载现有依赖：

   npm uninstall bcryptjs @types/bcryptjs
   

2. 重新安装：

   npm install bcryptjs
   npm install --save-dev @types/bcryptjs
   

3. 清除TypeScript缓存：

   npx tsc --clearCache
   

最后重启IDE，重新编译项目。

4. 注意前端环境使用限制 #

虽然bcryptjs可以在前端React项目中使用，但要注意：

• 加密操作是CPU密集型任务，在前端执行可能导致页面卡顿，建议尽量将加密逻辑放在后端服务中。
• 如果必须在前端使用，确保调用的是同步或异步方法（hashSync/compareSync是同步，hash/compare是异步），避免语法错误。

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