TypeScript如何不使用泛型获取函数第一个参数的类型合并props

要实现不手动声明泛型的前提下提取传入函数的第一个参数（也就是OriginalProps）类型，你可以直接用TypeScript内置的Parameters工具类完成，它可以直接提取函数的所有参数类型组成元组，取元组的第一个元素就是你要的props类型。

完整可运行的代码如下：

import type { JSX } from 'react';

const addAgeProp = (Component: (props: any) => JSX.Element) => {
  // 提取Component第一个参数的类型
  type OriginalProps = Parameters<typeof Component>[0];
  type CombinedProps = OriginalProps & { age: number };

  return (props: CombinedProps) => {
    return <Component {...props} />;
  };
};

// 测试用例
interface Props {
  name: string
}

addAgeProp((props:Props)=> {
  props.name // 自动推导为string类型
  props.age // 自动推导为number类型
  return <></>
})

补充说明：

• 如果你用的是React标准函数组件，也可以把入参Component的类型替换为React.FC<any>，同时用React.ComponentProps<typeof Component>提取props类型，效果完全一致。
• Parameters是TypeScript全局内置的类型工具，不需要你自己手写泛型声明，符合你的使用要求。

内容的提问来源于stack exchange，提问作者Иван Вольнов