Javascript 数组对象的Typescript接口

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

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

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

---

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

您的意思是这样的吗

接口操作{
关键词：数字；
文本：字符串；
值：number；//或任意值
}
函数func（选项：IOption[]）{}

---

但若您接受其他参数，那个么如何在接口上声明它呢？我希望有一种方法不必将所有内容都声明为内联

我对React.js不太熟悉，但通常情况下，您应该能够使用TypeScript完成它

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


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

至于你的另一个问题

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

下面是一个示例（请参见管道

|

）：

---

我试图将您的答案合并到我的代码中，请参见上面的更改，但不知何故，它在我的函数体中抛出了一个错误，即“类型“string | IOption”上不存在属性“value”

好的，根据您的

下拉输入

界面，您接受

选项

属性的

字符串

和

IOption[]

类型。由于您有两种不同的类型，您应该像这样检查

选项

类型：

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

---

但若你们接受其他参数，你们如何在接口上声明它呢？我希望有一种不声明所有参数的方法inline@Billy更新了我的答案。我试图将您的答案合并到我的代码中，请参见上面的更改，但不知怎的，它在我的函数体中抛出了一个错误，即“类型“string | IOption”上不存在属性“value”。当我尝试深入研究这些选项时。value@Billy你是说类型

string | IOption[]上不存在“属性'value'”

还是它真的是

string | IOption

？因为在

下拉输入中有
string | IOption[]
你能澄清问题是什么吗？对象数组应该是
Array
或
IOption[]
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
  }
}