'typescript infer object value from key
I have a map of components like this:
import { Select, Input, DatePicker } from 'antd';
const MyComponentMap = {
Select,
Input,
DatePicker
}
I'm trying to create a JSON structure like this:
const myFields: MyTypes<typeof MyComponentMap> = {
address1: {
component: {
type: 'Input', <- string name
props: {
// input props
}
}
},
when: {
component: {
type: 'DatePicker',
props: {
// DatePikcer props
}
}
}
}
The important part is that I want to create a MyTypes type that uses MyComponentMap to infer the correct prop types, but I'm failing. I have something like this:
type ComponentMap = Record<string,React.ComponentType>
type MyTypes<Components extends ComponentMap> = Record<string,MyField<Components>>
type MyField<Components extend ComponentMap> = {
component: MyFieldConfig<Components>,
...other things
}
And here's MyFieldConfig:
type MyFieldConfig<Components extends ComponentMap> = {
type: keyof Components;
props: Partial<React.ComponentProps<keyof Components>>
}
Obviously that doesn't work because props isn't tied to the key from the ComponentMap (so I can set
{
type: "Input",
props: { ...props for a Select }
}
I also tried
type MyFieldConfig<Components extends ComponentMap, R = keyof Components> = {
type: R;
props: Partial<React.ComponentProps<Components[R]>>
}
but I got type R cannot be used to index Components
How can I achieve the inference I'm looking for?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
