如何让TypeScript泛型树结构接口的ID字段名可配置？

问题背景 #

现有一套基于递归接口实现的泛型树结构，代码如下：

interface TreeNodeBase<TNode extends TreeNodeBase<TNode, TData>, TData> {
  readonly id: string;
  readonly data: TData;
  readonly children?: ReadonlyArray<TNode>;
}

// 特化使用示例
type MyTreeNode = TreeNodeBase<MyTreeNode, MyTreeNodeData>;
type MyTreeNodeData = string | number;

这套实现依赖接口的循环引用特性运行正常，但现在需要让id字段名支持自定义（比如改为nodeId或其他任意字符串），尝试通过映射类型扩展接口的方式未找到可行方案。

解决方案 #

可以通过接口继承映射类型的方式实现动态ID字段名，同时保留递归泛型约束，具体实现如下：

// 定义动态ID字段的映射类型
type TreeNodeKey<TKey extends string = "id"> = {
  readonly [P in TKey]: string;
};

// 继承映射类型的递归树节点接口
interface TreeNodeBase<
  TNode extends TreeNodeBase<TNode, TData, TKey>,
  TData,
  TKey extends string = "id" // 设置默认字段名为id
> extends TreeNodeKey<TKey> {
  readonly data: TData;
  readonly children?: ReadonlyArray<TNode>;
}

使用示例 #

1. 使用默认id字段：

type MyTreeNode = TreeNodeBase<MyTreeNode, string | number>;

// 合法实例
const defaultNode: MyTreeNode = {
  id: "node-1",
  data: 123,
  children: []
};

2. 自定义nodeId字段：

type MyTreeNodeWithNodeId = TreeNodeBase<MyTreeNodeWithNodeId, string, "nodeId">;

// 合法实例
const customNode: MyTreeNodeWithNodeId = {
  nodeId: "node-2",
  data: "custom data",
  children: undefined
};

方案说明 #

• 映射类型TreeNodeKey<TKey>会根据传入的字符串类型TKey生成对应的只读字符串字段，实现字段名的动态配置。
• 接口TreeNodeBase通过继承该映射类型，将动态ID字段与原有data、children字段整合，同时保留了递归泛型约束（TNode extends TreeNodeBase<TNode, TData, TKey>），确保循环引用的特化逻辑依然有效。
• 为TKey设置默认值"id"，兼容原有代码的使用方式，无需修改历史调用。

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