使用省略删除typescript接口中的嵌套prop

Question

我在库中有一个组件，它的类型是这样的:

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 = () => ...;

现在，当我在项目中使用库中的这个时，我想编写一个使用该组件作为基础的组件，但在项目的其余部分，它使用另一个:

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>;
};

但是我打字有问题。如果我设置了LogoBox: LogoBoxTypeBase，在项目中(而不是在库中)使用<LogoBox>组件时，将提示我缺少img。

基本上，我想要的是:LogoBox: Omit<LogoBoxTypeBase, Omit<LogoBoxPropsBase, 'img'>>，但这不起作用。我也尝试了LogoBox: Omit<LogoBoxTypeBase, 'img'>，但这也不起作用。

我怎样才能做到这一点?

Answer 1

您正在尝试将类型与接口结合起来。LogoBoxType可以转换为接口。