如何让TypeScript函数支持传入0至无限个泛型选项对？

要让函数支持0到任意数量的泛型选项对，我们可以利用TypeScript的可变元组泛型替代原来固定数量的泛型参数，具体修改如下：

1. 重构类型定义 #

保留原有的CreateOpts类型，将MyOptions改为接受可变元组类型，以此支持任意数量的选项：

type CreateOpts<Type extends string, T> = {
  type: Type;
  things: Array<T>;
};

// 改用可变元组泛型，支持0到N个CreateOpts实例
type MyOptions<TOpts extends readonly CreateOpts<string, any>[] = readonly CreateOpts<string, any>[]> = {
  opts: TOpts;
};

2. 修改函数签名与实现 #

将函数的泛型参数替换为元组类型，同时修正原函数内部的遍历逻辑（原代码存在属性访问错误）：

function myFunc<TOpts extends readonly CreateOpts<string, any>[]>(
  options: MyOptions<TOpts>
) {
  // 遍历每个选项，再遍历选项内的things
  for (const opt of options.opts) {
    for (const thing of opt.things) {
      console.log(thing);
    }
  }
}

3. 使用示例 #

现在函数可以接受0个或任意数量的选项，TypeScript会自动推断每个选项的具体类型：

// 0个选项
myFunc({ opts: [] });

// 1个选项（类型推断为CreateOpts<'number', number>）
myFunc({ opts: [{ type: 'number', things: [1, 2, 3] }] });

// 3个不同类型的选项
myFunc({ opts: [
  { type: 'string', things: ['foo', 'bar'] },
  { type: 'boolean', things: [true, false] },
  { type: 'user', things: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] }
] });

关键修改说明 #

• 用可变元组泛型TOpts替代了原来固定的3组泛型参数，让类型系统可以动态捕获任意数量的选项类型。
• 元组类型readonly CreateOpts<string, any>[]确保每个元素都符合CreateOpts的结构，同时支持空数组（0个选项）。
• 修正了原函数中错误的属性访问：原代码试图访问options.things，但实际things是每个CreateOpts实例的属性，需要先遍历options.opts中的每个选项。

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