#StackBounty: #javascript #reactjs #flowtype How to describe type for a generic component export in flowjs

Bounty: 50

I’m upgrading code to types-first and stuck upon need to explicitly declare type of generic react component via flowjs annotations

// @flow
import * as React from 'react';
 
type P<TArg> = {
    items: TArg[],
    onSelect: (props: TArg) => void
}

type Item = {
    key: string
}

class Autocomplete<TElem: Item> extends React.Component<P<TElem>> {

}

//its external function provided via import, i put it here for simplicity
function woodoo<F>(v: F): F {
    return v
}

If i try to export result of calling the function:

export default woodoo(Autocomplete)

I will get following error:

Cannot build a typed interface for this module. You should annotate the exports of this module with types. Cannot determine the type of this call expression. Please provide an annotation, e.g., by adding a type cast around this expression.Flow(signature-verification-failure)

If I try to export it via component:

export default (woodoo(Autocomplete): Autocomplete)

I will get following error:

Cannot use Autocomplete [1] without 1 type argument.Flow(missing-type-arg)

I know export should be more like

export default (woodoo(Autocomplete): React$ComponentType<????>)

but idk what to put in angle backets to achieve proper typing.

Making the component covariant instead of generic is not valid since the expected value passed in onSelect function is exactly the same that provided via items property and usage of covariance would not yield the same level of strictness as usage of generic would.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.