Skip to content

Use of ComponentProps should possibly not be recommended #170

@s-h-a-d-o-w

Description

@s-h-a-d-o-w
Contributor

Reason being that it doesn't work properly with class components that have default props:

class Foo extends React.Component<{bar: number}> {
  static defaultProps = {
    bar: 123,
  };
}

const props: React.ComponentProps<typeof Foo> = {};
const foo = <Foo />; // Of course works

Results in: Property 'bar' is missing in type '{}' but required in type '{ bar: number; }'.ts(2741)

Also, the team who originally wrote it said it was only supposed to be used internally.

Considering that that discussion about improving ComponentProps I just linked to ended without getting resolved, I'd like to suggest to go with one of the following for this guide:

  • Instead of ComponentProps, have a code block with a custom type for people to use - possibly the one from the PR (since it does work). (While I personally do this in my projects, it seems to me that you're trying to stick with what's possible out of the box, so this might not be an acceptable solution for this guide, I suppose.)
  • Completely remove the part about ComponentProps from the README.
  • Warn about the shortcomings of using the vanilla ComponentProps.

I'd also like to note that there's a second shortcoming to both ComponentProps as well as my enhanced version: It's just not possible to use this with generic class components. Since TS doesn't support something like React.ComponentProps<typeof Foo<string>>. As far as I know. But one of course can export generic prop types.

Activity

piotrwitek

piotrwitek commented on May 17, 2019

@piotrwitek
Owner

Hey @s-h-a-d-o-w , thanks a lot for sharing your findings with us 👍

For now, I'll add a warning to ComponentProps type in the guide until I can find out some alternative solution.

I haven't studied the linked thread yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @piotrwitek@s-h-a-d-o-w

        Issue actions

          Use of ComponentProps should possibly not be recommended · Issue #170 · piotrwitek/react-redux-typescript-guide