如何在Mobx联合类型上安全访问属性？解决observe调用报错

嘿，我一眼就瞅出问题所在了——你在监听数组变化时，直接把observe回调里的change断言成了IArraySplice<any>，但Mobx给数组监听返回的change其实是个联合类型（包含IArrayChange、IArraySplice、IArrayUpdate这些不同的变化类型）。added属性只有IArraySplice类型才有，像IArrayChange（单个元素替换）这类事件就没有这个字段，TypeScript自然会严格校验，给你抛出属性缺失的报错。

下面给你几个实用的解决办法，按推荐程度排序：

1. 用类型守卫精准区分事件类型（最推荐） #

这是TypeScript里处理联合类型最规范的方式，通过Mobx自带的type字段做类型守卫，让TS自动推断当前change的具体类型：

observe(thisContainer.items, (change) => {
  // 判断当前是不是数组增删的splice事件
  if (change.type === 'splice') {
    // 这里TS会自动识别change是IArraySplice类型，放心访问added
    change.added.forEach((item: Item) => this.observeChanges(item));
  }
  // 要是你还需要处理其他类型的变化，比如单个元素更新
  else if (change.type === 'update') {
    console.log('元素更新啦:', change.newValue);
  }
});

这种方式既安全又清晰，后续维护代码也不容易踩坑。

2. 明确类型断言（仅限你确定只会触发splice事件的场景） #

如果你的业务逻辑里，这个数组只会发生增删操作（不会有单个元素替换、移动这类其他变化），那可以用类型断言快速解决，但要注意这是你自己要保证后续逻辑不会变哦：

observe(thisContainer.items, (change) => {
  const spliceChange = change as IArraySplice<Item>;
  spliceChange.added.forEach((item: Item) => this.observeChanges(item));
});

这种方式虽然简单，但不够健壮，要是后续业务改了，加了其他数组操作，很容易出现运行时错误，所以谨慎使用。

3. 属性存在性检查（兼容JS或宽松场景） #

要是你在JS环境里，或者想做兼容处理，可以先检查added属性是否存在再执行逻辑：

observe(thisContainer.items, (change) => {
  if (change.added) {
    change.added.forEach(item => this.observeChanges(item));
  }
});

不过在TS里，这种方式需要配合可选链或者类型断言，不然还是会有类型报错，所以还是优先选第一种方法。

总的来说，核心就是要记住Mobx数组的observe回调参数是联合类型，必须通过类型守卫或者合理的断言来缩小类型范围，才能安全访问特定类型独有的属性~

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