React Native/Expo项目中jwt-decode在TypeScript下调用报错

方案一：调整导入方式适配jwt-decode版本 #

• 若使用jwt-decode@3.x及更早版本，改用默认导入：

  import jwtDecode from 'jwt-decode';
  

• 若使用jwt-decode@4.x+版本，需明确导入命名导出：

  import { jwtDecode } from 'jwt-decode';
  // 可选：传入泛型定义解码后的payload类型
  interface MyJwtPayload { exp: number; userId: string }
  const payload = jwtDecode<MyJwtPayload>(token);
  

方案二：手动实现基础JWT解码函数 #

如果官方包的导入问题无法解决，可自行编写解码逻辑（仅处理payload解析，和jwt-decode核心功能一致）：

// 定义你的JWT payload类型
interface JwtPayload {
  exp: number;
  sub: string;
  // 添加你需要的其他字段
}

const decodeJwt = <T extends JwtPayload>(token: string): T => {
  try {
    // 拆分JWT的三个部分，取中间的payload
    const base64Url = token.split('.')[1];
    // 转换base64url格式为标准base64
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    // 解码并转成JSON对象
    const payloadStr = decodeURIComponent(
      atob(base64)
        .split('')
        .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
        .join('')
    );
    return JSON.parse(payloadStr) as T;
  } catch (err) {
    throw new Error('无效的JWT令牌');
  }
};

// 使用示例
const token = 'your-jwt-token-string';
const decoded = decodeJwt(token);

方案三：修改TypeScript配置 #

在项目根目录的tsconfig.json中添加/修改以下配置，优化模块导入处理：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

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