React和Typescript组件为`Component`提供道具类型

Question

I have the following HOC in React:

`restricted` prop
    const ConditionalSwitch = ({component: Component, showIfTrue, ...rest}) => (

    showIfTrue
        ? <Component {...rest}/>
        : null
);

How do I define the props so that Typescript will be happy with it?

{component: Component, showIfTrue, ...rest}

I tried

export interface CSProps {
    component: any,
    showIfTrue: boolean
}

How do I handle the ...rest here?

Answer 1

If you want to preserve type safety, you need to make ConditionalSwitch generic and have it infer the full props passed to the component based on the actual value of Component . This will ensure that the client of ConditionalSwitch will pass in all the required properties of the used component. To do this we use the approach described here :

const ConditionalSwitch = <C extends React.ComponentType<any>>({ Component,  showIfTrue, ...rest}: { Component: C, showIfTrue: boolean} & React.ComponentProps<C> ) => (
    showIfTrue
        ? <Component {...(rest as any) }/>
        : null
);

function TestComp({ title, text}: {title: string, text: string}) {
    return null!;
}

let e = <ConditionalSwitch Component={TestComp} showIfTrue={true} title="aa" text="aa" />  // title and text are checked

When passing the rest to the component we do need to use a type assertion because typescript is not able to figure out that { Component: C, showIfTrue: boolean} & React.ComponentProps<C> minus Component and showIfTrue is just React.ComponentProps<C> but you can't have it all :)

Answer 2

Try this:

export interface CSProps {
    component: any;
    showIfTrue: boolean;
    [key: string]: any;
}