TypeScript定义嵌套数组：type与interface选型及兼容实现方案

问题根因 #

之前两种方案的核心问题都是类型定义存在偏差：

• 纯type方案的NestedArray<T>定义为Array<T> | Array<NestedArray<T>>，将类型约束为「全是基础元素的数组」和「全是子数组的数组」两个互斥分支，不允许同一层级同时存在基础元素和子数组，因此混合存放时会触发类型报错。
• 纯interface方案仅定义了数字索引的返回值类型，没有继承标准数组的类型定义，因此丢失了map、filter等数组原生方法的类型支持。

最终实现 #

直接调整泛型定义，将数组元素的类型约束为「基础类型 或 嵌套数组自身」即可同时满足两个要求：

// 基础Item类型
type Item = { name: string }

// 嵌套数组泛型定义
type NestedArray<T> = Array<T | NestedArray<T>>

// 目标嵌套Item数组类型
type Items = NestedArray<Item>

效果验证 #

支持任意深度嵌套、同层混合存放元素 #

const item: Item = { name: 'demo' }
const items: Items = [
  item, // 顶层直接存放Item实例，无报错
  [
    item, // 子层级直接存放Item实例，无报错
    [
      item,
      [
        item,
        [item, [item, [item]]] // 支持任意深度嵌套，无报错
      ]
    ]
  ]
]

保留所有标准数组原生方法 #

items.map(i => i) // 正常调用，无类型报错
items.filter(Boolean) // filter、forEach、reduce等所有数组API均可正常使用

内容的提问来源于stack exchange，提问作者laggingreflex