Flow: Explicit type specification for component rendering <MyComponent<T> />

[retyui]

Proposal

Now there is no possibility to explicitly specify the generic type for the component.

This syntax can solve the problem:

<MyComponent<T> />;

I can be rea

Use case

// @flow
import React from 'react';

class MyComponent<T> extends React.Component<{| +item: T |}>{  }

<MyComponent<number> item={1} />; // work good
<MyComponent<string> item={1} />; // error

[jamesisaac]

Yeah agreed this could be useful, I've run into it before (although for my use-case I've now just started using Hooks, which are easier to type). In the end I worked around it like this:

class ConcreteComponent extends MyComponent<number> {}

<ConcreteComponent item={1} />

...although that solution only works for class components, not functional components.

Supported in TypeScript since 2.9: https://github.com/Microsoft/TypeScript/pull/22415

[goodmind]

I have implemented parsing side #7675

[jbrown215]

This is something that's been on my list for a while, but I was never sure I would get to it. Thanks for looking into this, @goodmind! I will review as soon as I can.

[villesau]

@goodmind will your PR also add support for something like:

type LinkProps<T> = {a: T};
declare var AAA<T>: React$StatelessFunctionalComponent<{children: (props: LinkProps<T>) => void}>;

try flow

see: https://github.com/flow-typed/flow-typed/pull/3281/files#diff-f6fab52153e41297b233b7e3a1975af6R86

[goodmind]

@villesau, no, why?

[villesau]

Would be useful with type definitions.

[goodmind]

Why not generic function?

[villesau]

How would you express this:

type LinkProps<T> = {a: T};
declare var AAA<T>: React$StatelessFunctionalComponent<{children: (props: LinkProps<T>) => void}>;

[goodmind]

declare function AAA<T>(props: {children: (props: LinkProps<T>) => void}): React$Node

[clayne11]

Any movement on this? This is an awesome feature in Typescript.