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:
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:
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
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'ButtonFill'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'>
