How to create a TS type which has enum value as key and corresponding React functional component as value

Question

Please see the code block below.

import Button from './Button'; // React component which has type React.FC<ButtonType>
import Select from './Select'; // React component which has type React.FC<SelectType>
import Checkbox from './Checkbox'; // React component which has type React.FC<CheckboxType>

enum ComponentType {
  button = 'bla_button',
  select = 'bla_select',
  checkbox = 'bla_checkbox',
}

type ComponentMap = {
  [key in ComponentType]: React.FC<any>;
};

const componentMap: ComponentMap = {
  [ComponentType.button]: Button,
  [ComponentType.select]: Select,
  [ComponentType.checkbox]: Checkbox,
};

I want to have a better type for ComponentMap instead of using React.FC<any> so it can infer when the key is 'bla_button', the value must be Button and so on.

Answer 1

You'll have to an interface/type which specifies the relational mapping from string key to function component value. You can use the typeof keyword to extract the type from the FC imports, and use indexed access types

type MapEnumToComponent = {
    'bla_button': typeof Button;
    'bla_select': typeof Select;
    'bla_checkbox': typeof Checkbox;
}

type ComponentMap = {
  [key in ComponentType]: MapEnumToComponent[key];
};