correctly typing using immer to make a svelte store

Question

import produce from 'immer';
import { writable } from 'svelte/store';

const initialValue = {
  toiletsCleaned: 0,
};

const { subscribe, set, update } = writable(initialValue);

export const barStore = {
  subscribe,
  cleanToilet: () => {
    update((state) =>
      produce(state, (base, draft) => {
        draft.toiletsCleaned++;
      })
    );
  },
};import produce from 'immer';
import { writable } from 'svelte/store';

interface Bar {
  toiletsCleaned: number;
}

const initialValue: Bar = {
  toiletsCleaned: 0,
};

const { subscribe, set, update } = writable<Bar>(initialValue);

export const barStore = {
  subscribe,
  cleanToilet: () => {
    update((state: Bar) =>
      produce<Bar>(state, (base, draft) => {
        draft.toiletsCleaned++;
      })
    );
  },
};

Is giving me the error

    Property 'toiletsCleaned' is missing in type '<Base extends any>(base?: Base | undefined, ...rest: any[]) => any' but required in type '{ toiletsCleaned: number; }'.
  src/stores/bar.ts(14,7): error TS2769: No overload matches this call.
    Overload 1 of 3, '(recipe: (...args: any[]) => any, initialState: (base: any, draft: any) => void): <Base extends (base: any, draft: any) => void>(base?: Base | undefined, ...rest: any[]) => any', gave the following error.
      Argument of type '{ toiletsCleaned: number; }' is not assignable to parameter of type '(...args: any[]) => any'.
        Type '{ toiletsCleaned: number; }' provides no match for the signature '(...args: any[]): any'.
    Overload 2 of 3, '(base: { toiletsCleaned: number; }, recipe: (draft: any) => void, listener?: PatchListener | undefined): { toiletsCleaned: number; }', gave the following error.
      Argument of type '(base: any, draft: any) => void' is not assignable to parameter of type '(draft: any) => void'.
  src/stores/bar.ts(14,23): error TS7006: Parameter 'base' implicitly has an 'any' type.
  src/stores/bar.ts(14,29): error TS7006: Parameter 'draft' implicitly has an 'any' type.

The code works okay if I pass something to update like (state => {...state, toiletsCleaned: state.toiletsCleaned + 1}) but I would like to use immer for more complicated examples.

Things I've tried: Svelte typescript page, Immer typescript page, making an interface with {toiletsCleaned: number} and applying it to writable, produce as a type argument, and also to various arguments.

I'm not very famialr with this stuff but based on the this from docs `produce(currentState, producer: (draftState) => void): nextState` shouldn't this `produce(state, (base, draft) => {` be more like this `produce(state, (draft) => {` <- draft is the first argument not second — Molda, Mar 11 '21 at 15:35
@Molda that was it! not typescript at all, just me using immer wrong :( please make an answer so I can accept it! — James Wilson, Mar 11 '21 at 18:58

correctly typing using immer to make a svelte store

0 Answers0