Mobx with TypeScript incompatible types 错误

Question

我正在尝试将车辆数组设置为我从商店获取的数组。但是，Typescript 似乎在抱怨什么。

我的模型是这样的：

import { types } from 'mobx-state-tree';
export const Vehicle = types.model('Vehicle', {
  model: types.string,
  vrm: types.string,
});

export const VehicleDetails = types.model('Vehicle Details', {
  policyNumber: types.string,
  vehicles: types.array(Vehicle),
});

我正在尝试使用这里的商店：

export const VehicleDetails: React.FC = observer(() => {
  const { dashboardStore } = useStores();
  const [policyNumber, setPolicyNumber] = useState<string | null>('');
  const [vehicles, setVehicles] = useState<Instance<typeof Vehicle[]> | null>(null);

  useEffect(() => {
    if (!dashboardStore.dashboard) {
      if (!dashboardStore.isLoading) {
        dashboardStore.fetchPolicyDetails('P0000700587');
      }
    }
  }, []);
  useEffect(() => {
    if (dashboardStore.vehicleDetails) {
      const { policyNumber, vehicles } = dashboardStore.vehicleDetails;
      setPolicyNumber(policyNumber);
      setVehicles(clone(vehicles) as Instance<typeof Vehicle[]>);
    }
  }, [dashboardStore.vehicleDetails]);

但是，我似乎无法克服这个错误

 setVehicles(clone(vehicles) as Instance<typeof Vehicle[]>);

给我一个错误。

我收到的错误如下：

Conversion of type 'IMSTArray<IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>> & IStateTreeNode<...>' to type 'IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Types of property 'push' are incompatible.
    Type '{ (...items: ({ model: string; vrm: string; } & NonEmptyObject & IStateTreeNode<IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>>)[]): number; (...items: ExtractCSTWithSTN<...>[]): number; }' is not comparable to type '(...items: IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>[]) => number'.
      Types of parameters 'items' and 'items' are incompatible.
        Type 'IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>' is not comparable to type '{ model: string; vrm: string; } & NonEmptyObject & IStateTreeNode<IModelType<{ model: ISimpleType<string>; vrm: ISimpleType<string>; }, {}, _NotCustomized, _NotCustomized>>'.

Answer 1

您 useState 的类型似乎不正确。应该是：

type VehicleType = Instance<typeof Vehicle>;

// ...

  const [vehicles, setVehicles] = useState<VehicleType[] | null>(null);

Mobx with TypeScript incompatible types 错误

Mobx with TypeScript incompatible types error

typescript

mobx

mobx-react

mobx-state-tree