web-dev-qa-db-ja.com

React HOCおよびTypeScript 3.2

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

javascriptreactjstypescripthigher-order-components
26
Deftomat

これはあなたが望んでいた答えではないと確信していますが、内部関数のpropsのタイプをanyに変更し、Omit次のように、外部関数の戻り値の型注釈を入力します。

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