TypeScriptを使用してReact Higher Orderコンポーネントの型アノテーション

Question

私はReactプロジェクトのために、Typescriptを使ってHigher Order Componentを書いています。これは、基本的にReactコンポーネントを引数として受け取り、それをラップする新しいコンポーネントを返します。しかし

期待どおりに動作するように、TSは、匿名クラスを 『「エクスポートされた関数の型が持っているか、プライベート名を使用して返す』ことを不平を言っているが、当該

機能：

export default function wrapperFunc <Props, State> (
    WrappedComponent: typeof React.Component, 
) { 
    return class extends React.Component<Props & State, {}> { 
     public render() { 
      return <WrappedComponent {...this.props} {...this.state} />; 
     } 
    }; 
} 

エラーは合理的ですが、返されるクラスのラッパー関数はエクスポートされておらず、他のモジュールのインポートではこの関数は戻り値が何であるか分かりませんが、コンポーネントパスをラップする必要があるため、外部機能へ。

明示的に返品タイプtypeof React.Componentを指定して試すと、このエラーは表示されません。明示的な戻り値の型を持つ問題の

機能：

export default function wrapperFunc <Props, State> (
    WrappedComponent: typeof React.Component, 
): typeof React.Component {      // <== Added this 
    return class extends React.Component<Props & State, {}> { 
     public render() { 
      return <WrappedComponent {...this.props} {...this.state} />; 
     } 
    }; 
} 

しかし、私は、このアプローチの有効性に関する一定していません。これは、TypeScriptのこの特定のエラーに取り組むための正しいアプローチと考えられますか？ （または、意図しない副作用を他の場所に作成していますか？それとももっと良い方法ですか？）

（編集）ダニエルの提案に従って引用符を変更してください。

Answer 1

Type annotation for React Higher Order Component using TypeScript

戻り値の型typeof React.Componentは真実ではなく、包まれたコンポーネントのユーザにとって非常に便利です。コンポーネントが受け入れる小道具に関する情報を破棄します。

リアクションタイピングは、この目的のための便利なタイプのReact.ComponentClassを提供します。むしろ、そのクラスから作成されたコンポーネントのタイプよりも、クラスの種類は次のとおり

React.ComponentClass<Props> 

（それは内部の詳細情報としてstateタイプが記載されていないことに注意してください）。あなたのケースでは

：

export default function wrapperFunc <Props, State, CompState> (
    WrappedComponent: typeof React.Component, 
): React.ComponentClass<Props & State> { 
    return class extends React.Component<Props & State, CompState> { 
     public render() { 
      return <WrappedComponent {...this.props} {...this.state} />; 
     } 
    }; 
} 

ただし、WrappedComponentパラメータで同じことをやっています。あなたはrender内でそれを使用しているかに基づいて、私はそれも宣言する必要があることを推測している：

WrappedComponent: React.ComponentClass<Props & State>, 

しかし、私は、これは完全な機能（CompStateが使用されていないではないと仮定して、これは野生の推測であり、 Props & Stateは、その組み合わせに常に現れる単一のタイプのパラメータでもよい）。

Answer 2

ステートレスコンポーネントも処理するので、入力パラメータのより適切なタイプはReact.ComponentTypeです。

type ComponentType<P = {}> = ComponentClass<P> | StatelessComponent<P> 

以下はその使用法を明確にした例です。

import * as React from 'react'; 

export default function <P = {}>(
    WrappedComponent: React.ComponentType<P> 
): React.ComponentClass<P> { 
    return class extends React.Component<P> { 
    render() { 
     return <WrappedComponent {...this.props} />; 
    } 
    }; 
}