React.ComponentTypeを静的プロパティで入力する方法は？

Question

私はnext.jsページ用のHOCコンポーネントを作成しています。このHOCは、特定のgetInitialProps静的関数を持つコンポーネントを受け入れる必要があります。

私は流れと、このための右のタイピングを見つけ出すことができません：私はこのエラーを取得する

const wrapComponent = (Component: React.ComponentType<*>) => { 
    const original: Function = Component.getInitialProps; 

    return class extends React.Component<*> { 
     static async getInitialProps(ctx) { 
      const props = await original(ctx); 
      return { 
       ...props, 
       custom: 'a', 
      }; 
     } 

     render() { 
      return <Component {...this.props} />; 
     } 
    } 
} 

を：

5:  const original: Function = Component.getInitialProps; 
              ^property `getInitialProps`. Property not found in 
5:  const original: Function = Component.getInitialProps; 
           ^statics of React$Component 

Demo

Answer 1

これはあなたの探しているものですか？

// @flow 

import React from 'react'; 
import type {ComponentType} from 'react'; 

interface StaticInterface { 
    fn(): void; 
} 

class NoStatic extends React.Component<{}> { 
} 

class WithStatic extends React.Component<{}> { 
    static fn() {} 
} 

const c1: ComponentType<{}> = NoStatic;      
const c2: ComponentType<{}> = WithStatic;      
const c3: ComponentType<{}> & StaticInterface = WithStatic; 
// const c4: ComponentType<{}> & StaticInterface = NoStatic;  // NOT OK 

(demo)

私はこれはかなり自分自身を混乱見つけます。

https://blog.bluematador.com/posts/enforcing-method-presence-in-react-components-with-flow

関連：私はこのことから、それを適応

https://github.com/facebook/flow/issues/2048

https://github.com/facebook/flow/pull/3994

Answer 2

あなたも、正確に知っていますあなたが探している用語。あまりにも多くの先行知識でそれを検索することは簡単です。私の悪い：ちょうどあなたが静的メソッドに

class SampleClass { 
    static test() { 
    console.log('I am a static method') 
    } 
} 
SampleClass.test() 
// 'I am a static method' 

編集を有効にする方法の前にキーワードstaticを使用しています。私はあなたのコードを見ていて、それを解釈しようとしています。私はとても好奇心が強い。 Reactにこのような慣習的でないクラス/コンポーネント構文を使用している理由はありますか？あなたが現在の構文の内容を知っていない限り、自分自身を踏み外しているかもしれません。もっと慣習的な構文で助けを求めることに決めたら、私は使えるかもしれないと思う。