Question

63

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

rated 0 times [ 66] [ 3] / answers: 1 / hits: 15463 / 7 Years ago, tue, september 26, 2017, 12:00:00

I'm writing a HOC component for next.js pages, and this HOC needs to accept a component with a specific getInitialProps static function.

I can't get figure out the right typing for this with flow:

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} />;

        }

    }

}

I get this error:

5:     const original: Function = Component.getInitialProps;

                                            ^ property `getInitialProps`. Property not found in

5:     const original: Function = Component.getInitialProps;

                                  ^ statics of React$Component

Demo

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

declanm

Add To Favorites

Follow

Total Points: 614

Total Questions: 105

Total Answers: 97

Location: Dominica

Member since Sat, Nov 5, 2022

2 Years ago

answered 7 Years ago dequant · Accepted Answer

Is this what you're looking for?

// @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)

I find this pretty confusing myself. I adapted it from this:

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

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