TypeScript排序IActivity数组后可打印对象但访问属性返回undefined

问题排查与修复方案 #

1. 先解决console.log的快照误导问题 #

浏览器打印引用类型时不会存储执行时刻的快照，你看到的对象属性是点击展开那一刻的最新值，不是执行打印代码时的实际值。现在你打印整个对象能看到属性、打印单个属性返回undefined，大概率是执行console.log(test.description)的时候description确实还没赋值，后续异步逻辑补全了属性，等你去控制台点开对象时才看到完整属性。
直接改成打印执行时刻的快照确认问题：

console.log(JSON.parse(JSON.stringify(test)))

如果这时候打印出来的对象没有description，就说明是运行时属性缺失的问题。

2. 调整MobX响应式对象的访问逻辑 #

你用到了toJS方法说明当前操作的是MobX的可观察对象，不需要转成普通JS对象再访问属性，直接读取原响应式对象的属性即可：

sortedActivities.forEach(activity => {
  console.log(activity.description)
})

如果是MobX版本或者配置的问题，错误时机调用toJS反而可能丢失属性。

3. 修复排序逻辑的潜在隐患 #

Array.sort是原地排序方法，会直接修改传入的原数组，如果你传入的activities是MobX可观察数组，原地排序会触发额外的响应式更新，很容易出现意料之外的问题。建议先拷贝数组再排序，顺便补充date为null的边界处理：

const sortedActivities = [...activities].sort((a, b) => {
  const aTimestamp = a.date ? new Date(a.date).getTime() : 0
  const bTimestamp = b.date ? new Date(b.date).getTime() : 0
  return aTimestamp - bTimestamp
})

4. 校验运行时字段匹配性 #

TypeScript的接口定义只做编译时检查，运行时拿到的数据字段如果和定义不一致（比如后端返回的是首字母大写的Description，或者是desc缩写），也会出现能在控制台看到属性、但按接口定义的字段名访问返回undefined的情况，可以直接打印所有键确认：

console.log(Object.keys(test))

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