Typescript Error, React Higher order Component

Long time React developer trying to adapt to typescript.

I am having issues getting the correct typing on this simple Higher order component

/**
 *  Returns a component that will have a default set of classnames
 */

function withDefaultClasses<T extends JSX.IntrinsicAttributes>(
  Component: React.FunctionComponent<T>,
  defaultClassNames: string,
) {
  
   type Props = T & { className?: string };

  return function withClasses(props: T & { className?: string }) {
    const { className, ...rest } = props;

    // Check if className is present or not before concatenating
    const classNames = className
      ? defaultClassNames + ' ' + className
      : defaultClassNames;

    return <Component className={classNames} {...rest} />;
  };
}

I am getting the following error

Type '{ className: string; } & Omit<Props, "className">' is not assignable to type 'IntrinsicAttributes & T'.
  Type '{ className: string; } & Omit<Props, "className">' is not assignable to type 'T'.
    'T' could be instantiated with an arbitrary type which could be unrelated to '{ className: string; } & Omit<Props, "className">'.

I believe it it due to the fact that the generic component could not have the className property perhaps.

I'm at a loss

I was expecting not to see Typescript errors

In this higher-order function, you're trying to extend a React component with additional props. The issue you're facing is that TypeScript doesn't know that the component you're providing (Component) accepts a className prop.

What you can do is to make a new type that extends T and includes className. Like this:

function withDefaultClasses<T extends React.ComponentProps<any>>(
  Component: React.ComponentType<T>,
  defaultClassNames: string,
) {
  return function withClasses(props: T) {
    const { className, ...rest } = props;

    // Check if className is present or not before concatenating
    const classNames = className
      ? defaultClassNames + ' ' + className
      : defaultClassNames;

    // We spread the rest props and add our concatenated className
    return <Component {...rest as T} className={classNames} />;
  };
}

In the above code, React.ComponentProps<any> allows us to ensure T always includes className as a possible property. React.ComponentType<T> is a more generic type for components, allowing for both function and class components. The as T assertion on the rest props allows TypeScript to understand that the properties are meant for the Component.

This should resolve the TypeScript error. It assumes that the original component (or components) you are wrapping with withDefaultClasses can accept a className prop. If that's not the case, you may need to adjust the types or the components accordingly.