I have an array of fields that contain various types of input to be displayed on the user interface.
const fields = [
{
id: 'textInput_1',
fieldType: 'text',
},
{
id: 'selectInput_1',
fieldType: 'select',
},
{
id: 'textInput_2',
fieldType: 'text',
},
] as const;
For my text and select input handlers, I want them to only accept keys that are associated with either a text or select field type.
To achieve this, I am creating a union of all possible keys like so:
type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
type ItemKeys = ArrayElement<typeof fields>['id']; // 'textInput_1' | 'selectInput_1' | 'textInput_2'
Ultimately, I would like to dynamically generate the following type definitions:
type TextItemKeys = 'textInput_1' | 'textInput_2';
type SelectItemKeys = 'selectInput_1';