TypeScript泛型工具函数报错：嵌套函数读取泛型id属性失败

问题原因分析 #

1. 泛型未加约束：你定义的泛型T没有任何类型约束，TypeScript无法确认T包含id属性，所以在mapper函数中访问d.id会提示“id不存在于类型T”。
2. 类型不匹配：data的类型是(T & { id: string })[]，调用map时迭代出的每个元素类型是T & { id: string }，但mapper函数的参数类型是T，两者类型不兼容，导致data.map(mapper)报错。

修正后的代码 #

export const useActionLinks = <T extends { id: string }>(
  data: T[]
) => {
  let active = '';

  function mapper(d: T) {
    return {
      ...d,
      isActive: d.id === active, // 现在T已约束包含id，无报错
    };
  }
  const itemsData = data.map(mapper); // 类型匹配，无报错
  console.log(itemsData);
  // 可选：明确返回类型，让调用方更清晰
  return itemsData as (T & { isActive: boolean })[];
};

关键调整说明 #

• 泛型约束：通过<T extends { id: string }>强制T必须是包含id: string属性的对象，从根源解决id属性不存在的类型报错。
• 参数类型简化：data的类型改为T[]，因为T已经满足“至少包含id属性”的要求，无需额外交叉类型。
• 返回类型优化：可选地通过类型断言明确返回数组的元素类型是T与{ isActive: boolean }的交叉类型，让函数的返回值类型更清晰。

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