如何用静态属性键入 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

如何用静态属性键入 React.ComponentType？

How to type a React.ComponentType with a static property?

javascript

reactjs

flowtype

nextjs

如何用静态 属性 键入 React.ComponentType？

How to type a React.ComponentType with a static property?

javascript

reactjs

flowtype

nextjs

如何用静态属性键入 React.ComponentType？