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，然后将{{ 1}}键入外部函数的返回类型注释，如下所示：

Omit

React HOC和TypeScript 3.2

1 个答案: