refactor: Improve typing so it shows the props #1591
Conversation
|
✔️ Deploy Preview for forma-36 ready! 🔨 Explore the source changes: 751e39d 🔍 Inspect the deploy log: https://app.netlify.com/sites/forma-36/deploys/61b0ea9a02e4c30007accdee 😎 Browse the preview: https://deploy-preview-1591--forma-36.netlify.app |
| @@ -1,5 +1,11 @@ | |||
| import React from 'react'; | |||
|
|
|||
| export type ExpandProps<T> = T extends object | |||
There was a problem hiding this comment.
Wow, this is quite cool. Now I need to understand how it works :)
There was a problem hiding this comment.
What this does is get the type T and if it's an object, it creates a copy and iterate over and returns a object typing {}, so it shows up as that on the definition not as the name.
There was a problem hiding this comment.
thanks for the explanation
There was a problem hiding this comment.
Could you add some explanation around this type in the code comment, like the purpose and how it works (pretty much your answer for Alex) for the future us.
| import getStyles from './ButtonGroup.styles'; | ||
| import type { ButtonGroupProps } from './types'; | ||
|
|
||
| function _ButtonGroup(props: ButtonGroupProps, ref: React.Ref<HTMLDivElement>) { | ||
| function _ButtonGroup( | ||
| props: ExpandProps<ButtonGroupProps>, |
There was a problem hiding this comment.
can ExpandProps be a part of ButtonGroupProps?
There was a problem hiding this comment.
Sadly no, because it would expand the Type inside the ButtonGroupProps, but here it would show as ButtonGroupProps only, and not the values inside it
|
This is so much better 😍 |
| @@ -1,5 +1,11 @@ | |||
| import React from 'react'; | |||
|
|
|||
| export type ExpandProps<T> = T extends object | |||
massao
requested review from
denkristoffer,
Lelith,
m10l,
mshaaban0 and
a team
as code owners
Before
With these changes instead of the IDE showing:
After
It will expand the props and show like this:
Currently I'm checking if it's possible to get rid of then moreand show all of them, but seems like a configuration on the editor sideIt's actually on the tsserver file used on the VSCode, it isn't even a configuration that can be changed by the user without changing the file itself, for more context check here
PS: Only did the changes on the Button package for now, while I'm checking how to get that improved.
PS2: If you try this branch locally you may need to rebuild the packages and maybe restart the TS server.