TypeScript报错：'js-cookie'类型不存在'get'属性的问题排查

无法构建以下React代码：

import Cookies from 'js-cookie';

React.useEffect(() => {
  
  interface UserInfo {
  name: string;
  verified: boolean;
}
  
  const userInfo = Cookies.get('userInfo');
  if (userInfo && !userInfo.verified) {
    setUserName(`unknown`);
  } else {
    setUserName('else');
  }
}, []);

报错信息：

Type error: Property 'get' does not exist on type 'typeof import("js-cookie")'.
87 | const userInfo = Cookies.get('userInfo');

已尝试执行：

• npm install js-cookie
• npm install --save @types/js-cookie

但仍存在该错误，请问原因是什么？

• 导入方式不符
  js-cookie的默认导出逻辑在TypeScript环境下可能存在匹配问题，将导入语句改为命名导入或整体导入即可：

// 方式1：整体导入
import * as Cookies from 'js-cookie';
// 方式2：命名导入
import { get } from 'js-cookie';
// 调用时直接使用 get('userInfo')

• 类型定义未正确加载
  1. 删除node_modules文件夹和package-lock.json/yarn.lock文件，重新执行npm install，确保依赖完整安装；
  2. 检查tsconfig.json的compilerOptions.types配置，若存在该数组，添加"js-cookie"：

{
  "compilerOptions": {
    "types": ["js-cookie"]
  }
}

• 忽略了Cookie的存储类型
  Cookie存储的是字符串，直接调用userInfo.verified会报错，即使解决了导入问题，也需要先解析字符串为对象：

const userInfoStr = Cookies.get('userInfo');
const userInfo: UserInfo | null = userInfoStr ? JSON.parse(userInfoStr) : null;
if (userInfo && !userInfo.verified) {
  setUserName('unknown');
} else {
  setUserName('else');
}

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