如何定义对象数组的TypeScript interface 解决map调用空值报错问题

问题原因 #

• 你给historyState设置的初始值是null，接口请求是异步操作，页面第一次渲染时还没拿到后端返回的数据，此时history的值为null，你直接用非空断言!跳过空值校验，读取reports字段自然会抛出空指针错误。
• 你最开始的类型定义存在结构错误：最初的IHistory接口把数组括号写在了对象外面，相当于你定义了一个对象数组类型，但实际后端返回的是外层为对象、内部reports字段才是数组的结构，虽然你后续调整了类型定义，但没处理初始空值的问题。
• 非空断言!仅能用于你100%确定值一定不为空的场景，异步请求未返回的场景下不应该直接使用。

解决方法 #

1. 替换非空断言为可选链判空
   把遍历代码改为可选链写法，值为空时会直接终止执行，不会抛出错误：

props.history?.reports?.map((hist, idx) => <p key={idx}>{hist.created_at}</p>)

2. 添加加载兜底逻辑
   异步请求的间隙增加加载状态或者空数据提示，优化展示效果：

{
  props.history?.reports?.length ? (
    props.history.reports.map((hist, idx) => (
      <p key={idx}>{hist.created_at}</p>
    ))
  ) : (
    <p>暂无历史数据</p>
  )
}

3. 修复拼写错误
   你定义state时变量名拼写错误，hitoryState少了字母s，建议修正为historyState，避免后续开发出现不必要的问题。

4. 类型匹配优化
   后端返回的created_at是字符串类型，你调整后的类型定义把该字段设为string是正确的，无需再改为Date类型，如果你需要使用日期对象，可以手动对返回的字符串做转换。

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