Creating effective shared types in TypeScript without destroying hoverability
Sorry that my title is a bit wonky wacky, but I hope that my description will make sense:
So in this codebase I have a button component, this button component accepts a few props, such as size, fill, color, etc.
In this specific case, I am running into a code design question with my fill option.
Fill can be one of 3 things:
'solid' | 'outline' | 'none'.
However, I have some components which want to refer to this component, but also be able to take a prop themselves of how the button should work. (So in some cases where this button is used it will be solid, in others it will be an outline)
For this, my corworker made this type to refer to in our Button component's types: export type ButtonFill = 'solid' | 'outline' | 'none' which is all fine and good, except for one thing. Now when you hover over fill, it shows ButtonFill rather than 'solid' | 'outline' | 'none'.
I do not like this behavior, as I feel that it makes our codebase more confusing.
So what would you guys do to make this more intuitive? Is his solution of making the separate type something you would like? Would you import the Button props and use Pick<'fill'>? Would you just hardcode the union wherever it is needed to be referenced in the codebase?3 Replies