如何将LocalStorage中的对象映射到JwtToken接口？

你的核心问题出在两个地方：一是没处理localStorage.getItem(_key)可能返回null的场景，二是类型断言的时机和方式不对。TypeScript的类型断言仅作用于编译阶段，不会在运行时校验数据结构，同时直接对null执行JSON.parse会抛出错误。

修正后的基础写法 #

先处理null和解析异常，再将解析后的对象断言为JwtToken：

retrieveToken(): JwtToken | null {
  const tokenStr = localStorage.getItem(_key);
  // 处理key不存在的情况
  if (!tokenStr) {
    return null; // 也可根据业务需求抛出错误
  }
  try {
    // 先解析字符串为对象，再断言为JwtToken类型
    return JSON.parse(tokenStr) as JwtToken;
  } catch (error) {
    console.error('Token解析失败:', error);
    return null; // 或做其他错误处理
  }
}

为什么之前的写法无效 #

• return JSON.parse(localStorage.getItem(_key) as JwtToken);：错误地将string|null直接断言为JwtToken，但localStorage存储的是字符串，必须先解析成对象才能匹配接口类型。
• return JSON.parse<JwtToken>(localStorage.getItem(_key));：localStorage.getItem(_key)可能返回null，JSON.parse(null)会得到null，与函数声明的返回类型JwtToken不匹配，导致编译报错。

进阶：添加运行时类型校验 #

如果需要确保返回的数据完全符合JwtToken接口（避免存储的数据结构异常），可以添加类型守卫函数做运行时校验：

export interface JwtToken {
  access_token: string;
  expires_in: number;
  token_type: string;
  refresh_token: string;
}

// 类型守卫函数，判断对象是否符合JwtToken结构
function isJwtToken(obj: unknown): obj is JwtToken {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    typeof (obj as JwtToken).access_token === 'string' &&
    typeof (obj as JwtToken).expires_in === 'number' &&
    typeof (obj as JwtToken).token_type === 'string' &&
    typeof (obj as JwtToken).refresh_token === 'string'
  );
}

retrieveToken(): JwtToken | null {
  const tokenStr = localStorage.getItem(_key);
  if (!tokenStr) return null;
  
  try {
    const parsedToken = JSON.parse(tokenStr);
    if (isJwtToken(parsedToken)) {
      return parsedToken;
    } else {
      console.error('Token结构不符合JwtToken接口定义');
      return null;
    }
  } catch (error) {
    console.error('Token解析失败:', error);
    return null;
  }
}

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