Typescript interface for array object

Question

I am currently accepting interface for my component and it accept the array object "options" as one of its arguments. My question is how do you create an interface for array object. I believe you need to use index signature for the interface but I havent used it before and not sure how it need to be strcuture.

Currently I uses arrow function. And here is how I declare my interface of my function

   interface IOption {
         key: number;
        text: string;
        value: number
    }
    Interface DropDownInputInt {
              name: string;
              value: any;
              label: string;
              disabled: boolean;
              onChange: Function;
              extraClassName: string;
              required: boolean;
              options: IOption[] | string;
              multiple: boolean;
              clearable: boolean;
              index?: number;
              placeholder: string;
              toolTipMessage: string;
              addCollon: boolean;
}

const DropDownInput = ({
              name,
              value,
              label,
              disabled,
              onChange,
              extraClassName,
              required,
              options,
              multiple,
              clearable,
              index,
              placeholder,
              toolTipMessage,
              addCollon
}: DropDownInputInt) => {
            //MY CODES HERE
})

My second question is how do you create in interface that accept both string and object.

Could you clarify what is the question? Array of objects would be Array<IOption> or IOption[] typescriptlang.org/docs/handbook/basic-types.html — Aleksey L.
– Aleksey L., Commented Mar 29, 2020 at 5:55

Kenan Güler · Accepted Answer · 2020-03-29 03:30:46Z

1

Do you mean something like this?

interface IOption {
  key: number;
  text: string;
  value: number; // or any
}

function func(options: IOption[]) {}

but if you are accepting other arguments how do you declare it on interface? I hope there is a way without declaring everything inline

I am not quite familiar with React.js, but normally you should be able to do it with TypeScript anyway

interface DropDownInputInt {
  name: string;
  value: any;
  label: string;
  // bla bla ...
}


const DropDownInput = (dropdownOptions: DropDownInputInt) => {
  // your code here
}

As for your other question

My second question is how do you create in interface that accept both string and object.

Here is an example (see the pipe |):

interface DropDownInputInt {
  somethindThatAcceptsBothStringAndObject: string | object
  // bla bla ...
}

I tried to incorporate your answer in my code, see my change above but somehow it throws error inside the body of my function saying "Property 'value' does not exist on type 'string | IOption'. when I tried drilling down the options.value

Ok, so as per your DropDownInputInt interface, you accept string and IOption[] types for the options property. Since you have two different types, you should check the options type like so:

const DropDownInput = (dropdownOptions: DropDownInputInt) => {
  // ...
  if(typeof dropdownOptions.options === 'string') {
    // you have a string here
  } else if(Array.isArray(dropdownOptions.options) && dropdownOptions.options.length > 0) {
    // you have IOption array here, which is not empty
    dropdownOptions.options[0].value; // accessing the value of the first option
    dropdownOptions.options[1].value; // accessing the value of the second option
    // etc. or simply use a for-loop to evaluate the options
  }
}

edited Mar 29, 2020 at 3:30

answered Mar 29, 2020 at 2:25

Kenan Güler

2,0237 silver badges16 bronze badges

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

4 Comments

Hawk Over a year ago

but if you are accepting other arguments how do you declare it on interface? I hope there is a way without declaring everything inline

Kenan Güler Over a year ago

@Billy Updated my answer.

Hawk Over a year ago

I tried to incorporate your answer in my code, see my change above but somehow it throws error inside the body of my function saying "Property 'value' does not exist on type 'string | IOption'. when I tried drilling down the options.value

Kenan Güler Over a year ago

@Billy do you mean "Property 'value' does not exist on type string | IOption[] or is it really string | IOption? Cause, in your DropDownInputInt you have string | IOption[]

Collectives™ on Stack Overflow

Typescript interface for array object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related