使用 immer 正确打字以创建一个苗条的商店

时间:2021-03-11 06:40:46

标签: typescript svelte immer.js

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


给我错误

    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.
  

如果我向 update 传递诸如 (state => {...state, toiletsCleaned: state.toiletsCleaned + 1}) 之类的东西,代码可以正常工作,但我想将 immer 用于更复杂的示例。

我尝试过的事情:Svelte 打字稿页面、Immer 打字稿页面、使用 {toiletsCleaned: number} 制作接口并将其应用于 writableproduce 作为类型参数,以及各种参数。

0 个答案:

没有答案