如何用单个泛型实现多类型推断？TypeScript实践

安全阿岳

2026-7-4

实现TypeScript类型让options数组item参数自动匹配defaultValue类型

你当前的RenderItems<T>写法无法实现需求，因为current_index_of_array不是合法的TypeScript语法，且无法在映射类型中追踪数组每个元素的具体类型。以下是正确的实现方案：

类型定义与函数实现

// 单个选项的类型，强制item参数与defaultValue类型一致
type TypedOption<T> = {
  defaultValue: T;
  item: (value: T) => void;
};

// 每个属性的结构：包含标签和选项数组
type RenderItem<T extends TypedOption<any>[]> = {
  label: string;
  options: T;
};

// 最终的RenderItems是键值对结构，键为任意字符串，值为RenderItem
type RenderItems = Record<string, RenderItem<any[]>>;

// 函数定义，利用TypeScript自动推断能力
const func = <T extends RenderItems>(renderItems: T) => {};

使用示例

调用函数时，每个item的参数类型会自动匹配同一项的defaultValue类型：

func({
  prop1: {
    label: "example",
    options: [
      {
        defaultValue: "example string",
        item(value) {
          // value 类型自动推断为 string
          console.log(value.toUpperCase());
        }
      },
      {
        defaultValue: new Date(),
        item(value) {
          // value 类型自动推断为 Date
          console.log(value.getFullYear());
        }
      }
    ]
  },
  prop2: {
    label: "example 2",
    options: [
      {
        defaultValue: 1234,
        item(value) {
          // value 类型自动推断为 number
          console.log(value.toFixed(2));
        }
      }
    ]
  }
});