using Omit to remove nested prop in typescript interface

Issue

I have a component in a library that is typed like this:

export interface LogoBoxProps {
  img: React.ReactElement<HTMLImageElement>,
  srText?: string,
  href?: LinkProps['href']
}

export type LogoBoxType = React.FC<React.HTMLAttributes<HTMLDivElement> & LogoBoxProps>

export const LogoBox: LogoBoxType = () => ...;

Now when I use this from the library in a project, I would like to write a component that uses this component as basis but in the rest of the project, it uses the other one:

import {LogoBox as LogoBoxBase, LogoBoxProps as LogoBoxPropsBase, LogoBoxType as LogoBoxTypeBase} from "@lc/ui";

export const LogoBox = ({
  className,
  children,
  ...rest
}) => {
  return <LogoBoxBase img={<img className="navigation__logo" src="assets/img/logo_small.svg" alt="Logo of the thing" />}>
    {children && <h1>{children}</h1>}
  </LogoBoxBase>;
};

But I am having issues with the typing. If I set LogoBox: LogoBoxTypeBase, any usage of the <LogoBox> Component in the project (not in the library), will prompt me that img is missing.

Basically, what I want is: LogoBox: Omit<LogoBoxTypeBase, Omit<LogoBoxPropsBase, 'img'>>, but that doesn't work. I also tried LogoBox: Omit<LogoBoxTypeBase, 'img'>, but that also does not work.

How can I achieve this?

Solution

You are trying to combine types with interfaces. LogoBoxType could be converted to an interface.

Answered By - Pratik Wadekar