为高阶组件添加了ts定义，关于ts定义中的泛型如何定义？

Question

在项目中写一个高阶组件时，为其定义了ts类型，但是在做props参数的泛型定义时却犯了难，不知道在哪里定义。请大佬们指教一番

interface BaseType {
    className?: string
    styles?: CSSProperties
}
type WrapperType = (Component: FC<BaseType>) => <T>(props: T) => JSX.Element

const Wrapper: WrapperType = (Component) => (props) => {
    return (
        <>
            <Component {...props} />
        </>
    )
}

const A = Wrapper((props) => {
    return (
        <div></div>
    )
})

const B = Wrapper((props) => {
    return (
        <div></div>
    )
})
// 调用
return (
    <>
        <A XX={xx} XXX={xxx} />
    </>
)

实现的高阶组件大概如上。想实现的功能是高阶组件(Wrapper)接受一部分通用参数，其余的在A组件和B组件自身定义 想到了可以通过泛型实现。但是对ts理解还不够透彻 写不明白 求指教

Answer 1

没用jsx但是大概就是这样，在线例子

interface BaseType {
    className?: string
    styles?: Object
}

interface Props {
    name: string
}

type Component = (props: Props) => any

const Wrapper = <T extends Component>(Component: T) => (props: Parameters<T>[0] & BaseType) => {
    return Component(props)
}

const A = Wrapper((obj: {name: string}) => {})


A({className: '123', name: '321'})

其实要做的就是获取传入组件的参数类型，并且在其基础上新增类型

而 Parameters 高阶类型就可以获取到 一个函数的参数类型