如何将localStorage数据映射为TypeScript指定的Me接口类型？

这个问题其实是TypeScript新手常踩的坑——TypeScript的接口只是编译时的类型约定，运行时根本不存在接口这个东西。你虽然把JSON.parse的结果默认当成了Me类型，但这只是告诉编译器“相信我，这个对象符合Me的结构”，并不会在运行时自动过滤掉多余的字段，所以控制台才会输出完整的原始数据。

要真正把数据转换成只包含id和email的Me类型对象，你需要手动提取需要的字段，这里有几种实用的方法：

方法1：直接解构赋值（简单场景） #

在赋值的时候只提取你需要的两个字段，这样得到的me就是严格符合Me接口的对象：

ngOnInit() {
  const storedData = localStorage.getItem('me');
  if (storedData) {
    const parsedData = JSON.parse(storedData);
    // 只提取id和email字段
    this.me = {
      id: parsedData.id,
      email: parsedData.email
    };
  }
  console.log(this.me); // 现在只会输出{id: 11, email: "@mail.ru"}
}

方法2：写一个转换函数（复用场景） #

如果多个地方需要把原始数据转换成Me类型，建议封装一个专门的转换函数，还能顺便做类型校验，避免非法数据：

// 定义转换函数，同时做类型检查
function convertToMe(rawData: unknown): Me {
  // 先断言成包含可能字段的类型，方便后续访问
  const data = rawData as Partial<Me> & Record<string, unknown>;
  
  // 校验必要字段的类型是否正确
  if (typeof data.id !== 'number' || typeof data.email !== 'string') {
    throw new Error('存储的用户数据格式不符合要求');
  }
  
  // 返回严格符合Me接口的对象
  return {
    id: data.id,
    email: data.email
  };
}

// 在组件中使用
export class MyComponent implements OnInit { 
  me: Me | undefined; 

  ngOnInit() {
    const storedData = localStorage.getItem('me');
    if (storedData) {
      try {
        this.me = convertToMe(JSON.parse(storedData));
        console.log(this.me);
      } catch (err) {
        console.error('数据转换失败:', err);
      }
    }
  } 
}

方法3：简化的解构写法 #

如果不需要额外校验，也可以用更简洁的解构语法：

ngOnInit() {
  const parsedData = JSON.parse(localStorage.getItem('me') || '{}');
  const { id, email } = parsedData;
  this.me = { id, email };
}

注意这里加了|| '{}'，是为了防止localStorage.getItem('me')返回null时，JSON.parse报错。

总结一下：TypeScript的接口不负责运行时的数据转换，要得到严格符合接口的对象，必须手动提取或转换字段，这样既能满足类型检查的要求，也能得到你期望的对象结构。

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