Question 1:
Exploring a component library, material-ui, which offers interfaces and types for customizing the css class values of each component.
For the Select component, they define a type as a combination of string literals
type SelectClassKey = "root" | "select" | "filled" | "outlined" | "selectMenu" | "disabled" | "icon" | "iconOpen" | "iconFilled" | "iconOutlined"
Constructing a form to enable users to customize these values themselves and have them applied to the active theme.
I aim to iterate through this list dynamically to avoid manually listing them out as an enum for runtime usage. Is there a way to accomplish this?
Question 2:
Furthermore, I am interested in generating new types dynamically. Currently utilizing
type SelectOverride = {
[key in SelectClassKey]?: string;
};
to produce override objects.
I wish to create a generic function that generates these types based on the provided SelectClassKey as a parameter, something like
function makeOverrideType<T extends string>(arg:T): T {
type newType = {
[key in typeof arg]: string
};
return newType;
}
type SelectOverride2 = makeOverrideType(SelectClassKey);
However, encountering issues with this approach, suggesting gaps in my understanding of how typescript operates.