定义类型的打字稿同时包含对象数组和数组答案

【问题标题】：Typescript defining a type holds both array of object and arrays定义类型的打字稿同时包含对象数组和数组
【发布时间】：2023-02-05 23:14:45
【问题描述】：

我试图弄清楚如何定义一种类型的数组，其中包含对象数组和数组或对象键作为元素：

export type iFormInputTest = {
  name: string
  type: 'textInput' | 'Select'
}

export type iFormInputsTest= {
  button: {
    label: string
    style?: { [key: string]: any }
  }
  data: iFormInputTest[] | iFormInputTest[][]
}

const inputs: iFormInputsTest = {
  button: {
    label: 'Submit'
  },
  data: [
    {
      name: 'input1',
      type: 'textInput'
    },
    [
      {
        name: 'input2',
        type: 'textInput'
      },
      {
        name: 'input3',
        type: 'Select'
      }
    ],
    {
      name: 'input1',
      type: 'textInput'
    }
]}

这是我得到的类型错误：

输入'{ 按钮：{ 标签：字符串；样式：{ marginTop：数字； }; }; 数据：（{ 类型：“文本”；名称：字符串；标签：DefaultTFuncReturn；默认值：字符串；验证：RequiredStringSchema<string | 未定义，任何对象>； }[] | { ...; } | { ...; } | { ...; } | { ...; })[]; }' 不可分配给类型 'iFormInputs'。财产类型 “数据”不兼容。输入 '({ type: "text"; name: string; label: DefaultTFuncReturn; defaultValue: string; validation: RequiredStringSchema<string | 未定义，任何对象>； }[] | { ...; } | { ...; } | { ...; } | { ...; })[]' 不可分配给类型 'iFormInput[] | iFormInput[][]'。输入 '({ type: "text"; name: string; label: DefaultTFuncReturn; defaultValue: string; validation: RequiredStringSchema<string | 未定义，任何对象>； }[] | { ...; } | { ...; } | { ...; } | { ...; })[]' 不可分配给类型 'iFormInput[]'。输入'{类型：“文本”；名称：字符串；标签：DefaultTFuncReturn；默认值：字符串；验证：RequiredStringSchema<string | 未定义，任何对象>； }[] | { ...; } | { ...; } | { ...; } | { ...; }' 不可分配给类型 'iFormInput'。输入'{类型：“文本”；名称：字符串；标签：DefaultTFuncReturn；默认值：字符串；验证： RequiredStringSchema<字符串 |未定义，任何对象>； }[]' 不见了来自类型“iFormInput”的以下属性：名称、类型

我尝试了所有方法，但无法找到一种方法来定义 data 键同时包含 iFormInputTest 对象数组和 iFormInputTest 递归数组

【问题讨论】：

标签： typescript

【解决方案1】：

老实说，我不确定原因，但是可以通过这样声明类型来解决：

export type iFormInputsTest= {
  // ...
  data: Array<iFormInputTest | iFormInputTest[]>
}

- 编辑 -

转念一想，它的失败实际上是有道理的。你有一个联合类型，这意味着你有一个属性是 iFormInputTest[] 或者你的属性必须是 iFormInputTest[][] 但不能混合。正如我所说，您可以混合它们的方式是使用 iFormInputTest 或 iFormInputTest[] 数组。

你可以用这个语法得到相同的结果（如果你喜欢的话）：

export type iFormInputsTest= {
  // ...
  data: (iFormInputTest | iFormInputTest[])[]
}

【讨论】：