babel-plugin-typescript-to-proptypes icon indicating copy to clipboard operation
babel-plugin-typescript-to-proptypes copied to clipboard

Destructured Props in Functional Component

Open skipjack opened this issue 4 years ago • 2 comments

Thanks for your work on this. I just have a question for which I didn't see an answer in the README or open/closed issues, apologies if I missed it. Would the following inline type definitions in the following example be picked up and converted to prop types?

const MyComponent = ({
  title: string = 'Untitled',
  count: number = 0
}) => {
  return null
}

If not, would you be open to supporting it?

skipjack avatar Mar 08 '21 20:03 skipjack

@skipjack That syntax seems a bit invalid, do you mean something liek this?

const MyComponent = (props: {
  title: string,
  count: number,
  ...
}) => {
  return null
}

milesj avatar Mar 08 '21 23:03 milesj

Good point! 🤦 Forgot that the aliasing operator within destructuring conflicts with type assignment (both :). Yeah so either what you had...

const MyComponent = (props: {
  title: string,
  count: number
}) => {
  return null
}

Where you'd have to reference props.title or props.count. Or the following which I verified here...

const MyComponent = ({
  title = 'Untitled',
  count = 0
}: {
  title: string,
  count: number
}) => {
  return null
}

Not sure if I love either, without aliasing in the way my first example (where I fixed the capitalization and added defaults) would be the most concise and clean imo but it is what it is. Anyway curious whether the other alternatives would be viable with this plugin?

skipjack avatar Mar 09 '21 02:03 skipjack