数组对象的打字稿接口

Question

我目前正在接受我的组件的接口，它接受数组对象“选项”作为其参数之一。 我的问题是如何为数组对象创建接口。 我相信您需要为接口使用索引签名，但我之前没有使用过它，并且不确定它需要如何构造。

目前我使用箭头功能。 这是我如何声明我的函数接口

   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
})

我的第二个问题是如何在接受字符串和对象的接口中创建。

Answer 1

你的意思是这样的吗？

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

function func(options: IOption[]) {}

但是如果你接受其他参数，你如何在接口上声明它？ 我希望有一种方法无需内联声明所有内容

我对 React.js 不是很熟悉，但通常你应该可以用 TypeScript 来做

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


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

至于你的另一个问题

我的第二个问题是如何在接受字符串和对象的接口中创建。

这是一个示例（请参阅管道| ）：

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

我试图将您的答案合并到我的代码中，请参阅上面的更改，但不知何故，它在我的函数体内抛出错误，说“类型 'string | IOption' 上不存在属性 'value'。当我尝试深入研究选项时。价值

好的，根据您的DropDownInputInt接口，您接受options属性的string和IOption[]类型。 由于您有两种不同的类型，您应该像这样检查options类型：

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
  }
}