javascript - How to type a React.ComponentType with a static property? - Stack Overflow

admin管理员组

文章数量:1324431

I'm writing a HOC ponent for next.js pages, and this HOC needs to accept a ponent 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

I'm writing a HOC ponent for next.js pages, and this HOC needs to accept a ponent 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

• javascript
• reactjs
• flowtype
• next.js

Share Follow edited Sep 26, 2017 at 7:12 Simon Boudrias asked Sep 26, 2017 at 5:38 Simon BoudriasSimon Boudrias 44.7k1616 gold badges108108 silver badges136136 bronze badges 3

• React ponents never had an getInitialProps method. If those are specific ponents then you have to type Component as such, not as React.Component. – Felix Kling Commented Sep 26, 2017 at 5:45
• @FelixKling you mean create a class interface? – Simon Boudrias Commented Sep 26, 2017 at 7:11
• That would work I guess. – Felix Kling Commented Sep 26, 2017 at 7:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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./posts/enforcing-method-presence-in-react-ponents-with-flow

Related:

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

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

本文标签： javascriptHow to type a ReactComponentType with a static propertyStack Overflow