数组对象的打字稿接口

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

我试图将您的答案合并到我的代码中，请参阅上面的更改，但不知何故，它在我的函数体内抛出错误，说“类型'字符串 | IOption' 上不存在属性'值'。当我尝试向下钻取时options.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
  }
}