如何优化TypeScript泛型类型的IntelliSense显示，使其更简洁易读？

我太懂这种在VSCode里hover变量时，看到一大串嵌套泛型的痛苦了！这些内部实现细节完全掩盖了我们真正关心的核心结构。下面我会分享几个实用的技巧，帮你把复杂类型简化成干净易读的形式，完美匹配你想要的效果。

技巧1：手动绑定类型别名，让hover直接显示简洁名称 #

这是最直接满足你需求的方法——先让TypeScript生成复杂类型，再用别名封装它，最后把变量指定为这个别名类型。这样hover变量时就会直接显示别名，而不是展开的嵌套结构：

// 1. 先生成原始的复杂类型实例
const gRaw = graph({
  posts: object({ title: string() }),
  authors: object({ name: string().optional() })
});

// 2. 定义简洁的类型别名
type MyGraph = typeof gRaw;

// 3. 重新赋值并指定类型为别名
const g: MyGraph = gRaw;

现在hoverg时，VSCode会直接显示const g: MyGraph，完全符合你想要的效果！而如果你想查看MyGraph的具体结构，hoverMyGraph就能看到展开的细节。

技巧2：用Prettify工具类型清理冗余包装 #

TypeScript经常会在泛型类型里保留冗余的交叉类型或嵌套包装，我们可以自定义一个工具类型来“扁平化”这些结构，让显示更干净：

// 自定义工具类型：展开类型并去掉冗余包装
type Prettify<T> = {
  [K in keyof T]: T[K]
} & {};

// 修改Graph类型定义，返回Prettify后的结果
type Graph<T> = Prettify<{
  objects: {
    [K in keyof T]: T[K]
  }
}>;

// 同理优化ObjectDef和DataAttrDef的定义
type ObjectDef<T> = Prettify<{
  attrs: T
}>;

type DataAttrDef<T, Required extends boolean> = Prettify<{
  valueType: T;
  required: Required;
}>;

这个工具类型利用TypeScript的类型展开特性，把嵌套的泛型包装转换成更直观的对象结构，hover时会显示更整洁的类型。

技巧3：标记内部类型为@internal，隐藏实现细节 #

如果Graph、ObjectDef、DataAttrDef是你的库内部的实现类型，不需要暴露给用户，可以用/** @internal */注释标记它们。VSCode会在hover时自动折叠这些内部类型，只显示对外的核心结构：

/** @internal 内部属性定义，无需对外暴露 */
interface DataAttrDef<T, Required extends boolean> {
  valueType: T;
  required: Required;
}

/** @internal 内部对象定义 */
interface ObjectDef<T> {
  attrs: T;
}

/** 对外公开的Graph类型 */
interface Graph<T> {
  objects: T;
}

现在hoverg时，VSCode会优先显示对外的Graph接口结构，而不是展开内部的ObjectDef和DataAttrDef细节。

技巧4：简化query函数的泛型显示 #

对于query函数，我们可以修改泛型参数的定义，让它提取Graph的核心数据结构，而不是传递整个复杂的泛型包装：

// 修改query函数，用infer提取核心结构
function query<
  G extends Graph<any>, 
  K extends keyof G['objects']
>(
  graph: G, 
  _objectType: K
): Prettify<ExtractObjectType<G['objects'][K]>> {
  return {} as any;
}

// 同时优化ExtractObjectType的返回，只保留核心类型
type ExtractObjectType<T> = 
  T extends ObjectDef<infer Attrs> 
    ? Prettify<{
        [K in keyof Attrs]: Attrs[K] extends DataAttrDef<infer V, any> ? V : never
      }>
    : never;

这样hoverquery函数时，会显示更简洁的泛型参数，而不是一大串展开的内部类型。

备注：内容来源于stack exchange，提问作者Stepan Parunashvili