Typescript 接口樹形結構

Question

我想為樹結構定義一個接口。

每個節點可以有零個或多個子節點：

export interface TreeNode {
  children?: Array<TreeNode>;
}

我已經為TreeNode實現了遍歷 function 。

export function traverseTree(treeData: Array<TreeNode> | TreeNode, callback: (treeNode: any) => any) {
  // implementation omitted
}

我想測試一下。 代碼如下：

const treeData = [
  {
    name: "root_1",
    children: [
      {
        name: "child_1",
        children: [
          {
            name: "grandchild_1"
          },
          {
            name: "grandchild_2"
          }
        ]
      }
    ]
  },
  {
    name: "root_2",
    children: []
  }
];
const traversingHistory = [];
const callback = (treeNode: any) => {
  traversingHistory.push(treeNode.name);
}
traverseTree(treeData, callback);

但是，編譯失敗，因為treeData的類型參數不能應用於traverseTree 。

我不想向接口TreeNode添加屬性name ，因為樹節點可以具有動態屬性。 如何修改TreeNode接口以接受更通用的類型？

Answer 1

您可能遇到的錯誤是：

Object 文字只能指定已知屬性，並且類型中不存在“名稱”

如果你想允許其他鍵，它必須是類型的一部分。 您可以使用索引簽名執行此操作：

export interface TreeNode {
  [key: string]: any // type for unknown keys.
  children?: TreeNode[] // type for a known property.
}

Answer 2

嘗試將此聯合類型與object一起使用：

type TreeNode = {
    children?: Array<TreeNode>;
} & object;

Answer 3

我猜想使用generic而不是[key: string]: any更適合：

export type Tree<T> = T & {
  children?: T[];
}

保留我們要構建樹的Item類型的必填和可選字段： Tree<Item>對於這個問題，Item 是： { name: string } 。