如何在TypeScript中创建支持智能提示的动态方法？

核心实现机制 #

要复刻Redux Toolkit Query（RTK Query）里createApi动态生成带智能提示方法的效果，核心依赖TypeScript的几个高级类型特性，结合运行时的动态对象构建：

1. 模板字面量类型（Template Literal Types）：把配置里的方法名（比如getItems）转换成目标方法名（useGetItemsQuery、useLazyGetItemsQuery）。
2. 映射类型（Mapped Types）：遍历配置对象的所有键，为每个键生成对应的方法类型定义。
3. 泛型（Generics）：捕获传入的配置类型，让TypeScript能精准推断出动态生成的方法类型。
4. 运行时动态属性赋值：根据配置动态创建方法，同时让TypeScript的类型系统识别这些动态属性。

简化示例：动态生成带智能提示的Hook #

下面是一个极简版实现，模拟RTK Query根据配置生成useXXXQuery和useLazyXXXQuery的逻辑：

1. 定义基础类型结构 #

先明确配置和动态方法的类型规则：

// 单个查询方法的配置类型
type QueryConfig = {
  queryFn: () => Promise<any>;
};

// 映射类型：将配置键转换为对应的Hook类型
type GeneratedHooks<Queries extends Record<string, QueryConfig>> = {
  [K in keyof Queries as `use${Capitalize<string & K>}Query`]: () => { data: any; isLoading: boolean };
} & {
  [K in keyof Queries as `useLazy${Capitalize<string & K>}Query`]: () => () => Promise<any>;
};

2. 实现创建函数 #

编写createMockApi函数，接收查询配置并返回带动态Hook的对象：

function createMockApi<Queries extends Record<string, QueryConfig>>(
  queries: Queries
): GeneratedHooks<Queries> {
  const result = {} as GeneratedHooks<Queries>;

  // 遍历配置，动态生成对应Hook
  Object.keys(queries).forEach((key) => {
    // 生成useXXXQuery Hook
    const queryHookName = `use${key.charAt(0).toUpperCase() + key.slice(1)}Query` as keyof GeneratedHooks<Queries>;
    result[queryHookName] = () => ({
      data: null,
      isLoading: false,
    });

    // 生成useLazyXXXQuery Hook
    const lazyQueryHookName = `useLazy${key.charAt(0).toUpperCase() + key.slice(1)}Query` as keyof GeneratedHooks<Queries>;
    result[lazyQueryHookName] = () => queries[key].queryFn;
  });

  return result;
}

3. 使用效果 #

调用函数时，TypeScript会自动给出完整的智能提示：

const api = createMockApi({
  getItems: {
    queryFn: () => fetch('/api/items').then(res => res.json())
  },
  getUser: {
    queryFn: () => fetch('/api/user').then(res => res.json())
  }
});

// 此处会自动提示：useGetItemsQuery、useLazyGetItemsQuery、useGetUserQuery等
const itemsData = api.useGetItemsQuery();
const lazyGetUser = api.useLazyGetUserQuery();

关键细节说明 #

• 首字母大写处理：Capitalize<string & K>用来将方法名首字母大写，配合模板字面量生成符合React Hook规范的命名。
• 类型安全保障：通过类型断言告诉TypeScript动态生成的属性符合GeneratedHooks的类型定义，既保留智能提示又不破坏类型检查。
• 泛型的作用：Queries extends Record<string, QueryConfig>捕获了传入配置的具体类型，让TypeScript能精准推导每个Hook的返回值和参数类型。

内容的提问来源于stack exchange，提问作者helloworld