如何将Axios响应映射到TypeScript模型？含报错排查

问题根源 #

你的TypeScript接口定义和实际API返回的字段不匹配：

• 手动定义的ITodoAllResponse接口里是todos: ITodo[]
• 但控制台显示实际响应数据是{todo: Array(5)}，字段名是单数的todo，不是复数的todos

当你尝试访问data.todos.title时，data.todos是undefined，所以会抛出读取title的错误。

解决方案 #

1. 修正接口字段名 #

把接口里的字段改成和实际返回一致的单数形式：

export interface ITodoAllResponse {
  todo: ITodo[]; // 改成todo，和API返回字段匹配
}

之后访问数组元素时要先取具体项，再访问title，示例：

async getAllTodos() {
  const response = await grpcClient.get<ITodoAllResponse>('/your-endpoint');
  // 安全获取第一个todo的title
  const firstTodoTitle = response.data.todo[0]?.title;
}

2. 可选：转换响应字段（如果不能改接口） #

如果因限制无法修改接口字段名，可以在Axios响应拦截器里重命名字段：

const grpcClient: AxiosInstance = axios.create({...});

grpcClient.interceptors.response.use(response => {
  if (response.data && response.data.todo) {
    response.data.todos = response.data.todo;
    delete response.data.todo;
  }
  return response;
});

这样后续访问data.todos就能拿到正确数组，同时匹配你的接口定义。

额外注意点 #

• 访问数组元素时建议用可选链?.，避免数组为空时触发报错
• TypeScript接口仅做类型校验，不会自动转换实际返回数据的字段名，必须保证接口与返回数据的字段完全一致

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