如何为动态生成的Action Creator添加TypeScript类型校验？

要让TypeScript正确识别createActions生成的creators中的方法，我们需要利用泛型和映射类型来为动态生成的函数添加类型约束。下面是具体的实现步骤：

1. 重新定义CreateActions类型 #

我们需要把输入对象的每个键，映射成对应的action creator函数类型。根据需求不同，有两种实现方式：

基础版（payload为任意对象） #

适合不需要精确限制payload结构的场景，允许传入任意键值对对象：

// 把输入对象的每个键转换为接收任意对象payload的函数
export type CreateActions<T> = {
  [K in keyof T]: (payload: Record<string, unknown>) => {
    type: string;
    payload: typeof payload;
  };
};

进阶版（基于输入值推断payload类型） #

如果希望每个action的payload类型更精确，可以让输入对象的值指定payload的结构，然后通过类型提取来约束：

// 提取输入对象每个键对应的值类型作为payload类型
export type CreateActions<T> = {
  [K in keyof T]: (payload: T[K]) => {
    type: string;
    payload: T[K];
  };
};

2. 为createActions函数添加泛型约束 #

原函数没有类型声明，导致TypeScript无法推断返回值类型。我们需要给它加上泛型参数，关联输入和输出的类型：

// 泛型T约束为键是字符串、值为任意类型的对象
export const createActions = <T extends Record<string, unknown>>(name: string, actions: T) => {
  let types: Record<string, string> = {};
  let creators: CreateActions<T> = {} as CreateActions<T>;

  Object.keys(actions).forEach(actionKey => {
    const type = `${name.toUpperCase()}/${actionKey}`;

    types[actionKey.toUpperCase()] = type;

    creators[actionKey as keyof T] = (payload: T[keyof T]) => ({
      type,
      payload
    });
  });

  return {
    types,
    creators
  };
};

这里我们把creators的类型显式指定为CreateActions<T>，并通过类型断言解决初始化时空对象与目标类型不匹配的问题——毕竟我们明确知道后续会填充正确的函数。

3. 使用示例 #

基础版用法（payload为任意对象） #

// 输入对象的值用null占位，payload接受任意对象
const actionList = {
  add: null,
  remove: null
};

// 不需要手动指定类型，泛型会自动推断
const { creators } = createActions('Jedi', actionList);
creators.add({ name: 'Yoda' }); // TypeScript能识别add方法，允许传入任意对象payload
creators.remove({ id: 1 });

进阶版用法（精确payload类型） #

// 输入对象的值指定payload的结构（用类型断言明确类型）
const actionList = {
  add: {} as { name: string },
  remove: {} as { id: number }
};

const { creators } = createActions('Jedi', actionList);
creators.add({ name: 'Yoda' }); // ✅ 符合类型要求
creators.add({ age: 900 }); // ❌ TypeScript报错：缺少name属性
creators.remove({ id: 1 }); // ✅ 符合类型要求

关键原理说明 #

• 泛型T：捕获输入actions对象的具体结构（键名和值类型），让TypeScript知道动态生成的方法有哪些。
• 映射类型[K in keyof T]：遍历输入对象的每个键，为每个键生成对应的函数类型，实现动态类型的映射。
• 类型断言：在初始化creators时用as CreateActions<T>解决空对象与目标类型不匹配的问题，因为我们明确后续会填充正确的函数逻辑。

这样修改后，TypeScript就能完全识别creators中的每个方法，并且提供对应的类型校验啦！

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