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?
componentbut yourMyFieldConfigdoesn't mentioncomponentat all... could you rectify that (preferably by removing the extra level of nesting unless its presence is necessary)?componentproperty isn't what you're asking about, right?), and please be sure you have posted a minimal reproducible example; a typo likeComponents extend ComponentMapjust makes things harder on me. Ideally I can just drop your code into a standalone IDE, with no external dependencies like antd and react, fix the type mapping bit, and write up an answer explaining how just that part works. I'll check back in later to see if things have improved here. Good luck!