fix(immer): Proper typing for immer middleware in combination with slices (#3371)

* Add generic type parameter U to Immer type

* Add a test for immer + sliced store typing

* Rename test case for clarity on slice type

---------

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>

Author: wheerd

src/middleware/immer.ts

@@ -6,9 +6,10 @@ type Immer = <
   T,
   Mps extends [StoreMutatorIdentifier, unknown][] = [],
   Mcs extends [StoreMutatorIdentifier, unknown][] = [],
+  U = T,
 >(
-  initializer: StateCreator<T, [...Mps, ['zustand/immer', never]], Mcs>,
-) => StateCreator<T, Mps, [['zustand/immer', never], ...Mcs]>
+  initializer: StateCreator<T, [...Mps, ['zustand/immer', never]], Mcs, U>,
+) => StateCreator<T, Mps, [['zustand/immer', never], ...Mcs], U>
 
 declare module '../vanilla' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

tests/middlewareTypes.test.tsx

@@ -785,3 +785,53 @@ describe('create with explicitly annotated mutators', () => {
     expect(TestComponent).toBeDefined()
   })
 })
+
+describe('single middleware with sliced store', () => {
+  it('immer with slices where slice type differs from store (#3371)', () => {
+    interface BearSlice {
+      bears: number
+      addBear: () => void
+      eatFish: () => void
+    }
+
+    interface FishSlice {
+      fishes: number
+      addFish: () => void
+    }
+
+    const createBearSlice: StateCreator<
+      BearSlice & FishSlice,
+      [['zustand/immer', never]],
+      [],
+      BearSlice
+    > = (set) => ({
+      bears: 0,
+      addBear: () => set((state) => ({ bears: state.bears + 1 })),
+      eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
+    })
+
+    const createFishSlice: StateCreator<
+      BearSlice & FishSlice,
+      [['zustand/immer', never]],
+      [],
+      FishSlice
+    > = (set) => ({
+      fishes: 0,
+      addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
+    })
+
+    const useBoundStore = create<BearSlice & FishSlice>()((...a) => ({
+      ...immer(createBearSlice)(...a),
+      ...immer(createFishSlice)(...a),
+    }))
+
+    const TestComponent = () => {
+      expectTypeOf(useBoundStore((s) => s.bears)).toEqualTypeOf<number>()
+      expectTypeOf(useBoundStore((s) => s.fishes)).toEqualTypeOf<number>()
+      expectTypeOf(useBoundStore((s) => s.addBear)()).toEqualTypeOf<void>()
+      expectTypeOf(useBoundStore((s) => s.eatFish)()).toEqualTypeOf<void>()
+      return <></>
+    }
+    expect(TestComponent).toBeDefined()
+  })
+})