如何为TypeScript中DOM转嵌套数组的函数定义类型？

要实现接收HTMLBodyElement并返回任意深度嵌套数组的函数，你可以通过递归联合类型定义返回值类型——这种类型能完美适配未知深度的嵌套结构。

步骤1：定义递归嵌套数组类型 #

先创建一个递归类型，描述“DOM元素或同类型嵌套数组”的结构：

// 递归类型：数组元素可以是HTMLElement，或者另一个同类型的嵌套数组
type NestedElementArray = Array<HTMLElement | NestedElementArray>;

如果需要兼容更宽泛的DOM元素（比如SVG元素），可以把HTMLElement替换为Element；如果只处理特定元素类型，也可以用HTMLDivElement这类更具体的类型。

步骤2：为函数指定类型 #

基于上面的递归类型，给nodesToArr函数定义完整的类型签名：

function nodesToArr(element: HTMLBodyElement): NestedElementArray {
  // 示例实现逻辑：遍历DOM节点，递归生成嵌套数组
  return element.children.length === 0 
    ? [element] 
    : [element, Array.from(element.children).map(child => nodesToArr(child as HTMLBodyElement))];
}

类型说明 #

这个递归类型NestedElementArray的核心逻辑是：

• 数组的每一项要么是一个DOM元素（HTMLElement）
• 要么是另一个NestedElementArray，以此支持任意深度的嵌套层级

TypeScript会自动识别该递归类型的合法性，在类型检查时也能正确推断嵌套结构的类型。

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