TypeScript泛型默认参数适配问题：React组件默认函数Prop困境

你的核心矛盾是：默认的myFunc需要安全访问数组元素的name属性，但又不想限制用户传入自定义函数处理其他类型（比如number）。以下是具体的解决思路和代码：

1. 调整默认函数的泛型约束 #

让默认函数的泛型兼容可能带有name属性的数组以及其他任意类型，同时通过类型守卫确保访问name时的安全性：

const defaultMyFunc = <T>(data: T) => {
  // 判断data是否为数组且元素包含name属性
  if (Array.isArray(data) && data.every(item => 'name' in item)) {
    return data.map(d => ({ name: d.name as string }));
  }
  // 非预期类型时返回原数据或自定义逻辑
  return data;
};

2. 定义React组件的Prop类型 #

为了允许用户传入自定义函数，组件的myFunc Prop需要定义为泛型函数类型，兼容任意输入输出：

type MyComponentProps = {
  // 泛型函数，接受任意类型输入，返回任意类型输出
  myFunc?: <U>(data: U) => unknown;
};

// 组件实现，绑定默认函数
const MyComponent = ({ myFunc = defaultMyFunc }: MyComponentProps) => {
  // 组件业务逻辑
  return <div>...</div>;
};

3. 验证使用场景 #

• 处理带name的数组时，类型安全且返回预期结果：

  const users = [{ name: 'Alice' }, { name: 'Bob' }];
  myFunc(users); // 返回 { name: string }[] 类型
  

• 传入number等非数组类型时，无类型报错，默认函数直接返回原数据：

  myFunc(123); // 返回 123，无类型错误
  

• 用户可自由传入自定义函数处理任意类型：

  const customFunc = (data: number) => data * 2;
  <MyComponent myFunc={customFunc} />; // 类型完全兼容
  

关键说明 #

• 默认函数通过Array.isArray和'name' in item的类型守卫，既保证了预期场景的类型安全，又避免了泛型过度约束导致的兼容性问题。
• 组件Prop的泛型函数定义，确保用户能传入任意符合业务需求的自定义函数，同时保留默认函数的可用性。

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