如何用TypeScript为嵌套对象添加类型以实现自动补全？

你的问题在于当前类型定义未建立参数间的关联关系，导致第二个参数无法根据选中的分支过滤可选值，同时返回值类型不够精确，无法支持解构时的bug字段自动补全。

可以通过泛型关联参数类型解决该问题，具体实现如下：

首先保留原有的tree对象：

const tree = {
  branch1: {
    leaf1: {
      bug1: "ant",
    },
  },
  branch2: {
    leaf2: {
      bug2: "ladybug",
    },
  },
};

修改useTree函数的类型定义，使用两个泛型分别绑定分支和叶子的键，让第二个参数的可选值依赖第一个参数的选择：

const useTree = <T extends keyof typeof tree, U extends keyof typeof tree[T]>(
  branchName: T,
  leafName: U
): typeof tree[T][U] => {
  return tree[branchName][leafName];
};

现在调用useTree时就能获得完整的自动补全：

• 输入第一个参数时，只能选择"branch1"或"branch2"
• 选中"branch2"后，第二个参数只能选择"leaf2"
• 解构返回值时，只能选择该叶子节点下的"bug2"

测试调用代码：

// 所有层级都能获得精确的自动补全
const { bug2 } = useTree("branch2", "leaf2");

方案原理 #

1. 泛型T约束为tree的顶级键，确保第一个参数只能是合法分支名
2. 泛型U约束为tree[T]的键，即当前选中分支下的叶子名，实现参数间的关联过滤
3. 返回值类型直接指定为tree[T][U]，TypeScript能精确推断当前选中叶子节点的结构，因此解构时可自动补全对应bug字段

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