'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