使用Mobx搭配TypeScript时出现MST数组类型不兼容报错如何解决？

错误根源 #

• 类型定义写法错误：Instance<typeof Vehicle[]>属于非法用法，Instance<>泛型只接收MST模型构造器作为入参，你传入typeof Vehicle[]相当于传入「Vehicle构造函数的数组」，和你要的「Vehicle实例组成的数组」完全不匹配。
• MST的types.array返回的是专属的IMSTArray类型，和TS原生数组类型结构不兼容，直接用原生数组类型接收MST数组实例会触发类型不匹配报错。

解决方案 #

根据你的使用场景二选一即可：

方案1：本地状态保留MST数组实例

如果你需要在本地状态中继续使用MST数组的响应式能力、内置方法，直接修正类型定义即可：

1. 修正useState的类型声明，直接从父模型VehicleDetails中提取vehicles属性的类型，完全匹配不会出错：

import { Instance } from 'mobx-state-tree';

// 替换原来的vehicles状态定义
const [vehicles, setVehicles] = useState<Instance<typeof VehicleDetails>['vehicles'] | null>(null);

2. 赋值时无需多余类型断言，实在遇到类型校验问题可以先转unknown再转目标类型：

setVehicles(clone(vehicles) as unknown as Instance<typeof VehicleDetails>['vehicles']);

方案2：本地状态存储普通JS数组（更推荐，无额外类型负担）

如果你不需要在本地状态中使用MST的能力，只是要存储车辆数据，直接把MST数组转成原生数组即可：

1. 修正useState的类型声明为普通数组类型：

import { Instance, getSnapshot } from 'mobx-state-tree';

// 替换原来的vehicles状态定义，单个元素为Vehicle模型的实例类型
const [vehicles, setVehicles] = useState<Instance<typeof Vehicle>[] | null>(null);

2. 赋值时转换为原生数组，无需类型断言：

// 如果要保留MST实例结构
setVehicles(vehicles.slice());
// 如果只需要纯JSON数据，用getSnapshot
// setVehicles(getSnapshot(vehicles));

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