Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explicit type specification for component rendering <MyComponent<T> /> #7672

Open
retyui opened this issue Apr 26, 2019 · 9 comments

Comments

@retyui
Copy link

commented Apr 26, 2019

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

@retyui retyui added the discussion label Apr 26, 2019

@jamesisaac

This comment has been minimized.

Copy link
Collaborator

commented Apr 26, 2019

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: microsoft/TypeScript#22415

@goodmind

This comment has been minimized.

Copy link
Collaborator

commented Apr 27, 2019

I have implemented parsing side #7675

@jbrown215

This comment has been minimized.

Copy link
Contributor

commented May 1, 2019

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

This comment has been minimized.

Copy link
Collaborator

commented May 2, 2019

@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

This comment has been minimized.

Copy link
Collaborator

commented May 2, 2019

@villesau, no, why?

@villesau

This comment has been minimized.

Copy link
Collaborator

commented May 2, 2019

Would be useful with type definitions.

@goodmind

This comment has been minimized.

Copy link
Collaborator

commented May 2, 2019

Why not generic function?

@villesau

This comment has been minimized.

Copy link
Collaborator

commented May 2, 2019

How would you express this:

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

This comment has been minimized.

Copy link
Collaborator

commented May 2, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
5 participants
You can’t perform that action at this time.