如何为泛型函数绑定特定类型参数以创建调用别名?
createAsyncThunk Great question! Let's break this down into a general solution for any generic function, then dive into the optimized approach specifically for your Redux Toolkit use case.
General Case: Binding Generic Parameters to a Function Alias
First, why can't you just write const a = b<X, Y, Z> directly? In TypeScript, the <...> syntax for generic parameters only works when calling a function—not when assigning it to a variable. But we can achieve your desired result cleanly using type annotations with the original function's type.
Here's the step-by-step approach:
- Capture the type of your generic function using
typeof - Annotate your new variable with that type, specifying your fixed generic parameters
- Assign the original function to the variable
Example code:
// Sample generic function function b<T, U, V>(p: T, q: U, r: V): [T, U, V] { return [p, q, r]; } // 1. Get the type of function b type BFunction = typeof b; // 2. Create an alias with fixed generic parameters const a: BFunction<string, number, boolean> = b; // Now calling a(...) is identical to calling b<string, number, boolean>(...) const result = a("hello", 42, true); // Type: [string, number, boolean]
This method avoids extra wrapper functions, lets TypeScript handle all type inference, and keeps your code concise.
Optimized for createAsyncThunk
For your Redux Toolkit scenario, we can apply the same logic to fix the response and payload types for createAsyncThunk:
import { createAsyncThunk, AsyncThunkConfig } from '@reduxjs/toolkit'; // Define your fixed types type MyApiResponse = { /* Shape of your API response */ }; type ThunkProps = { id: string; /* Shape of your thunk's input */ }; // Capture the type of createAsyncThunk type CreateAsyncThunkType = typeof createAsyncThunk; // Create your specific thunk creator with fixed generics const createSpecificThunk: CreateAsyncThunkType<MyApiResponse, ThunkProps> = createAsyncThunk; // Usage is identical to createAsyncThunk<MyApiResponse, ThunkProps>(...) const fetchUserData = createSpecificThunk( 'user/fetch', async (props: ThunkProps) => { const res = await fetch(`/api/users/${props.id}`); return res.json() as MyApiResponse; } );
If you want to keep the third AsyncThunkConfig parameter flexible, you can extend the approach slightly:
const createSpecificThunk = <Config extends AsyncThunkConfig = AsyncThunkConfig>( ...args: Parameters<typeof createAsyncThunk<MyApiResponse, ThunkProps, Config>> ) => createAsyncThunk<MyApiResponse, ThunkProps, Config>(...args);
But the first type annotation method is the most elegant for most use cases.
Note on Your Initial Arrow Function Approach
Your original wrapper function works, but you don't need to manually define prop types—TypeScript can auto-infer them using the Parameters utility type:
const a = (...args: Parameters<typeof b<string, number, boolean>>) => b<string, number, boolean>(...args);
That said, the type annotation method we covered earlier is cleaner, as it doesn't create an extra wrapper function.
内容的提问来源于stack exchange,提问作者Nick Bull

