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

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.

CodePudding user response：

You can improve the type of the ComponentMap object by using the ComponentType enum to define the keys of the object, and then using the type of the React components as the values. This way, the type system will know the specific type of each component based on the corresponding key in the ComponentMap object.

Here is an example of how you can do this:

// Import the React components
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>

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

// Define the type of the ComponentMap object
// Use the ComponentType enum as the keys of the object
// Use the type of the React components as the values of the object
type ComponentMap = {
  [key in ComponentType]: React.FC<ButtonType | SelectType | CheckboxType>;
};

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

In this example, the ComponentMap type is defined using the ComponentType enum as the keys of the object, and the types of the React components as the values. This way, the type system will know the specific type of each component based on the corresponding key in the ComponentMap object.

CodePudding user response：

create an interface to define the corresponding type

interface ComponentInterface  {
  [ComponentType.button] : React.FC<ButtonType>;
  [ComponentType.select]:  React.FC<SelectType>,
  [ComponentType.checkbox]:  React.FC<CheckboxType>,
}

Then use it here

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

};

This way you can't accidentally assign button type to select