You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为泛型函数绑定特定类型参数以创建调用别名?

Solution for Generic Functions & Redux Toolkit's 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:

  1. Capture the type of your generic function using typeof
  2. Annotate your new variable with that type, specifying your fixed generic parameters
  3. 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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.28 14:22:46