typescriptmobxmobx-reactmobx-state-tree

Mobx with TypeScript incompatible types error


I am trying to set the vehicles array to the array that I am getting from the store. However, it seems that Typescript is complaining about something.

My model looks like this:

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),
});

I'm trying to use the store here:

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]);

However, it seems I cannot get past this error where

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

gives me an error.

The error I receive is the following:

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>>'.

Solution

  • It seems your types for useState are incorrect. It should be:

    type VehicleType = Instance<typeof Vehicle>;
    
    // ...
    
      const [vehicles, setVehicles] = useState<VehicleType[] | null>(null);