Being new to TypeScript, I am facing an issue that I am unsure how to resolve.
I want to generate a list of tuples from a list of components. Each tuple should consist of the component's name (keyof MyComponents) and its attributes.
(Refer to the code below)
interface MyComponents {
Container: {
fluid?: boolean
className?: string
},
Tag: {
text?: string
className?: string
hidden: boolean
}
}
//Get the keys of the list of my components
type Element = keyof MyComponents
//Get the attributes depending on the element name
type PickAttributes<T extends Element> = Pick<MyComponents[T], keyof MyComponents[T]>
//Create a mapped tuple type [Element, Attributes]
// and the attributes depend on the element
export type Tuple = {
[Element in keyof MyComponents]: [Element, PickAttributes<Element>]
}[keyof MyComponents]
const attr: PickAttributes<'Tag'> = {hidden: false} //This works and the auto completion works perfectly
const tuple1: Tuple = ["Tag", { hidden: false}] //This also works
const tuple2: Tuple = ["Container", { hidden: false}] //Error but it's normal as the element 'Container' doesn't have the property hidden:boolean
Everything is functioning correctly, however, there is an issue with autocompletion. When I enter the first element (Container, Tag, ...), the autocomplete for the second element (its attributes) displays all possible attributes, even incorrect ones.
For example, if I enter 'Tag' as the first element, it suggests 'fluid', but 'fluid' is only available in 'Container'! Intellisense shows all options
Furthermore, when I choose 'fluid', it recognizes that it is incompatible...
Typescript knows it's incompatible
Therefore, my question is: How can I limit autocomplete to show only valid attributes based on the element's name?
Any assistance would be greatly appreciated! Thank you!