javascript - 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 自动注入(inject)。

编辑:可能是同一个问题: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" />;
  }
}