Dynamic interface for array of object property value

Question

I have array of objects. Each object inside array represents an html input field. I want to load different interface on the base of type property inside the field.

interface Field {
  type: 'text' | 'radio';
  name: string;
}
interface TextField {
  placeholder: string;
}
interface RadioField {
  values: {
    value: string;
    label: string;
  }[];
}
const fields: Field[] = [
  {
    // How to make use of TextField interface here
    type: 'text',
    name: 'firstName',
  }
]

johannchopin · Accepted Answer · 2020-10-01 09:07:43Z

2

I will recommand you to define the Field type by the union with TextField and RadioField that extends a FieldCommon interface. Like that you are more precise so that a radio field should have values for example:

type Field = TextField | RadioField

interface FieldCommon {
  name: string;
}

interface TextField extends FieldCommon {
  type: 'text'
  placeholder: string;
}

interface RadioField extends FieldCommon {
  type: 'radio'
  values: {
    value: string;
    label: string;
  }[];
}

const fields: Field[] = [
  {
    type: 'text',
    name: 'firstName',
    placeholder:'Test' // valid
  },
  {
    type: 'text',
    name: 'firstName', // error: Property 'placeholder' is missing
  }
]

Playground Link

answered Oct 1, 2020 at 9:07

johannchopin

15k11 gold badges64 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

johannchopin Over a year ago

@ZeeshanAhmad No problem :/ don't forget to validate the answer if it's answering the question ;)

Collectives™ on Stack Overflow

Dynamic interface for array of object property value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related