How to define this interface Props so that this Props contains all the attributes of the passed component

Question

interface Props {
    component: any;
}
function Example(props: Props) {
    const {component: Component, children} = props
    return <Component>{children}</Component>
}

For example: the incoming component is TouchableOpacity in react-native, then the Example component automatically inherits all Props of TouchableOpacity. You can write like this and Typescript does not report errors:

<Example component={TouchableOpacity} onPress={handleSomePress} />

I am a newbie to TypeScript, this problem has bothered me for a long time. Looking forward to a perfect answer, pray.

Answer 1

You will have to use generics and get Typescript to infer the properties based off the component you assign.

// Prop type for wrapper component
type WrapperProps<TComponent extends React.ComponentType<any> = any> = 
  // component prop will be used to both pass the component to render
  // and to get the Typing for the component, once the component is assigned
  // Typescript will infer TComponent and propagate it thoughout the rest of
  // the type.
  { component: TComponent; } & 
  // Add all the props from the passed in component.
  React.ComponentProps<TComponent>;

// Create the component.
// The component must pass the generics as well otherwise they will be defaulted
// to any and no infered typing will occur.
const Wrapper = <TComponent extends React.ComponentType<any> = any>({
  // Get component from props.
  component,
  // Get the rest of the passed in props
  ...restProps
}: WrapperProps<TComponent>) => {

  // To render a custom component the variable must start with a capital. 
  const Component = component;

  // Here you could modify or remove props that have been passed in,
  // or apply defaults to missing props etc.

  // Render component with props.
  return <Component {...restProps} />;
};

Runnable Example