访问 jwt-decode 对象时出现打字稿错误

Question

我已经安装@types/jwt-decode，但无法正常工作。

import jwtDecode from 'jwt-decode'

...
let decodedToken = jwtDecode(token);
console.log(decodedToken) // this works! I can see the full object
console.log(decodedToken.exp) // error Object is of type 'unknown'.ts(2571)

Answer 1

对于 v3.1.1，最近添加了类型定义。

import jwt_decode, { JwtPayload } from 'jwt-decode'

const decodedToken = jwt_decode<JwtPayload>(token)

@Martina 在评论部分还添加了解析非标准声明的方法，也可以通过扩展 JwtPayload 接口上的类型来创建自定义 jwt 有效负载类型，例如：

type customJwtPayload = JwtPayload & { some_property: string };

进而，

const decodedToken = jwtDecode<customJwtPayload>(token);

Answer 2

问题是jwtDecode不知道您的令牌内有什么，因为它可以是任何东西。因此，它使用类型unknown来表示解码 JWT 的结果是未知的。

为了解决这个问题，你需要创建一个interface描述你期望在 JWT 中的内容，并告诉jwtDecode将它用作解码令牌的返回类型。你可以这样做：

interface MyToken {
  name: string;
  exp: number;
  // whatever else is in the JWT.
}

const decodedToken = jwtDecode<MyToken>(token);
console.log(decodedToken.exp); // works!