rename to withTypes, allow merge-overriding

Author: phryneas

packages/toolkit/src/tests/createAsyncThunk.typetest.ts

@@ -12,12 +12,13 @@ import type { ThunkDispatch } from 'redux-thunk'
 import type { AxiosError } from 'axios'
 import apiRequest from 'axios'
 import type { IsAny, IsUnknown } from '@internal/tsHelpers'
-import { expectType } from './helpers'
+import { expectExactType, expectType } from './helpers'
 import type {
   AsyncThunkFulfilledActionCreator,
   AsyncThunkRejectedActionCreator,
 } from '@internal/createAsyncThunk'
 
+const ANY = {} as any
 const defaultDispatch = (() => {}) as ThunkDispatch<{}, any, AnyAction>
 const anyAction = { type: 'foo' } as AnyAction
 
@@ -598,53 +599,74 @@ const anyAction = { type: 'foo' } as AnyAction
 }
 
 {
-  const typedCAT = createAsyncThunk.forTypes<{
+  const typedCAT = createAsyncThunk.withTypes<{
     state: RootState
     dispatch: AppDispatch
+    rejectValue: string
   }>()
 
+  // inferred usage
   const thunk = typedCAT('foo', (arg: number, api) => {
     // correct getState Type
     const test1: number = api.getState().foo.value
     // correct dispatch type
-    const test2: number = api.dispatch(
-      (dispatch, getState) => getState().foo.value
-    )
+    const test2: number = api.dispatch((dispatch, getState) => {
+      expectExactType<
+        ThunkDispatch<{ foo: { value: number } }, undefined, AnyAction>
+      >(ANY)(dispatch)
+      expectExactType<() => { foo: { value: number } }>(ANY)(getState)
+      return getState().foo.value
+    })
+
+    if (1 < 2)
+      // @ts-expect-error
+      return api.rejectWithValue(5)
+    if (1 < 2) return api.rejectWithValue('test')
     return test1 + test2
   })
 
+  // usage with two generics
   const thunk2 = typedCAT<number, string>('foo', (arg, api) => {
+    expectExactType('' as string)(arg)
     // correct getState Type
     const test1: number = api.getState().foo.value
     // correct dispatch type
-    const test2: number = api.dispatch(
-      (dispatch, getState) => getState().foo.value
-    )
+    const test2: number = api.dispatch((dispatch, getState) => {
+      expectExactType<
+        ThunkDispatch<{ foo: { value: number } }, undefined, AnyAction>
+      >(ANY)(dispatch)
+      expectExactType<() => { foo: { value: number } }>(ANY)(getState)
+      return getState().foo.value
+    })
+    if (1 < 2)
+      // @ts-expect-error
+      return api.rejectWithValue(5)
+    if (1 < 2) return api.rejectWithValue('test')
     return test1 + test2
   })
 
-  const thunk3 = typedCAT<
-    number,
-    string,
-    // @ts-expect-error TODO
-    // right now this still errors because
-    // it does not contain `state` and `dispatch`
-    {
-      rejectValue: string
-    }
-  >('foo', (arg, api) => {
-    // correct getState Type
-    const test1: number = api.getState().foo.value
-    // correct dispatch type
-    const test2: number = api.dispatch(
-      (dispatch, getState) => getState().foo.value
-    )
-    if (1 < 2) {
-      // TODO: @ts-expect-error
-      return api.rejectWithValue(5)
+  // usage with config override generic
+  const thunk3 = typedCAT<number, string, { rejectValue: number }>(
+    'foo',
+    (arg, api) => {
+      expectExactType('' as string)(arg)
+      // correct getState Type
+      const test1: number = api.getState().foo.value
+      // correct dispatch type
+      const test2: number = api.dispatch((dispatch, getState) => {
+        expectExactType<
+          ThunkDispatch<{ foo: { value: number } }, undefined, AnyAction>
+        >(ANY)(dispatch)
+        expectExactType<() => { foo: { value: number } }>(ANY)(getState)
+        return getState().foo.value
+      })
+      if (1 < 2) return api.rejectWithValue(5)
+      if (1 < 2)
+        // @ts-expect-error
+        return api.rejectWithValue('test')
+      return 5
     }
-    return api.rejectWithValue(5)
-  })
+  )
 
   const slice = createSlice({
     name: 'foo',
@@ -655,13 +677,21 @@ const anyAction = { type: 'foo' } as AnyAction
         .addCase(thunk.fulfilled, (state, action) => {
           state.value += action.payload
         })
+        .addCase(thunk.rejected, (state, action) => {
+          expectExactType('' as string | undefined)(action.payload)
+        })
         .addCase(thunk2.fulfilled, (state, action) => {
           state.value += action.payload
         })
-        .addCase(thunk3.rejected, (state, action) => {
-          // @ts-expect-error TODO does not have the right type yet because the config was incomplete
+        .addCase(thunk2.rejected, (state, action) => {
+          expectExactType('' as string | undefined)(action.payload)
+        })
+        .addCase(thunk3.fulfilled, (state, action) => {
           state.value += action.payload
         })
+        .addCase(thunk3.rejected, (state, action) => {
+          expectExactType(0 as number | undefined)(action.payload)
+        })
     },
   })
 

packages/toolkit/src/tsHelpers.ts

@@ -139,3 +139,5 @@ export type ActionFromMatcher<M extends Matcher<any>> = M extends Matcher<
 >
   ? T
   : never
+
+export type Id<T> = { [K in keyof T]: T[K] } & {}