React HOC 和 TypeScript 3.2

Question

随着 TypeScript 在 v3.2 中改进其 JSX 类型检查，我们现在无法正确键入我们的 HOC。

有人可以为 TypeScript 3.2 修复以下 HOC 中的类型吗？

import { ComponentType } from 'react';

type Props = { custom: string };
type Omit<T, K extends string> = Pick<T, Exclude<keyof T, K>>;

function hoc<P extends Props>(Component: ComponentType<P>) {
  return (props: Omit<P, keyof Props>) => {
    return <Component {...props} custom="text" />;
  }
}

TypeScript 错误：

Type '{ custom: string; }' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
Property 'custom' does not exist on type 'IntrinsicAttributes & P & { children?: ReactNode; }'

基本上，这个想法是将需要“自定义”属性的组件转换为不再需要它的组件，因为它将由 HOC 自动注入。

编辑： 可能是同一个问题：https://github.com/Microsoft/TypeScript/issues/28748

Answer 1

我确定这不是您希望的答案，但您可以通过将内部函数中的 props 类型更改为 any 并将 Omit 类型放入外部函数的返回类型注解，像这样：

function hoc<P extends Props>(Component: ComponentType<P>): ComponentType<Omit<P, keyof Props>> {
  return (props: any) => {
    return <Component {...props} custom="text" />;
  }
}