重写为 TS React HOC 时出现问题，这限制了可见性

Question

我有 React HOC，它基于固定的 prop 限制组件可见性

const RenderWhenIsVisible = Component => {
return function (props) {
let { isVisible, ...newProps } = props;
return props.isVisible ? <Component {...newProps} /> : null;
};
};

当尝试重写为 TS 时出现错误。下面是错误数最低的版本，同时我已经通过了其他几个版本

interface isVisible {
isVisible: boolean;
}
function RenderWhenIsVisible<T>(Component: React.ComponentType<T>) {
return function (props: T & isVisible ) {
let { isVisible, ...newProps} = props;
return props.isVisible ? <Component {...newProps } /> : null;
};
}

错误是：

类型"Omit"不可分配给类型 'IntrinsicAttributes & T & { children？： ReactNode; }'. 键入"省略"不能分配给类型"T"。 "T"可以用任意类型实例化，该类型可能与"Omit<T&amp;isVisible，"isVisible">无关。

我明白...newProps 应该清楚地键入为 T，但不知道如何传递这样的声明。

Answer 1

当 TypeScript 仍在处理未解析的类型参数(如T)和条件类型(如Omit)时，它可以推理的内容是有限制的。

有一些方法可以解决这个问题，在这种情况下，我建议，因为我们希望T和Omit<T & IsVisible, keyof IsVisible>是同一类型，因此使用联合将组件键入为接受这两种类型中的任何一种。这应该不会对呼叫站点产生负面影响，我们可以在没有任何其他问题的情况下使用newProps：

interface IsVisible {
isVisible: boolean;
}
function RenderWhenIsVisible<T>(Component: React.ComponentType<T | Omit<T & IsVisible, keyof IsVisible>>) {
return function (props: T & IsVisible ) {
let { isVisible, ...newProps} = props;
return props.isVisible ? <Component {...newProps } /> : null;
};
}

游乐场链接