如何避免Zod推断类型在VSCode中显示为匿名类型？

问题描述 #

使用Zod定义类型并通过z.infer推断类型别名后，在VSCode中悬停变量时，编辑器会显示展开后的完整类型结构，而非我们定义的类型别名（如Point）。对于大型复杂类型（如接口返回的ApiResponse），这种展开会大幅降低开发体验，无法快速识别类型归属。

示例代码：

import { z } from "zod";

const Point = z.object({
    x: z.number(),
    y: z.number(),
});

type Point = z.infer<typeof Point>;

// 悬停p时显示展开的{x: number; y: number;}而非Point
const p: Point = {x: 1, y: 3};

此前尝试用interface Point extends z.infer<typeof Point> {}替代类型别名，但该方法仅适用于普通对象类型，无法处理联合类型、可辨识联合等复杂场景。

解决方案 #

方法1：交叉空对象保留类型别名 #

通过给推断的类型交叉一个空对象& {}，让TypeScript保留类型别名的显示，该方法适用于所有类型（包括对象、联合类型、可辨识联合等）：

import { z } from "zod";

const Point = z.object({
    x: z.number(),
    y: z.number(),
});

// 交叉空对象，让VSCode悬停时显示Point而非展开结构
type Point = z.infer<typeof Point> & {};

const p: Point = {x: 1, y: 3};
// 悬停p时会显示：const p: Point

联合类型场景示例：

const Shape = z.discriminatedUnion("type", [
    z.object({ type: z.literal("circle"), radius: z.number() }),
    z.object({ type: z.literal("square"), sideLength: z.number() }),
]);

type Shape = z.infer<typeof Shape> & {};

const s: Shape = { type: "circle", radius: 5 };
// 悬停s时显示：const s: Shape

方法2：类型断言强制显示别名 #

如果不想修改类型别名的定义，可以在变量声明时使用类型断言，强制编辑器显示类型别名：

const p = {x: 1, y: 3} as Point;
// 悬停p时显示：const p: Point

方法3：调整TypeScript配置（有限生效） #

在tsconfig.json中启用"preserveConstEnums": true和"isolatedModules": true，部分场景下TypeScript会优先保留类型别名的显示，但该方法效果不稳定，不如前两种方法可靠。

原理说明 #

当直接使用type Point = z.infer<typeof Point>时，TypeScript会将其视为“透明”的类型别名，在编辑器悬停时自动展开原始结构。而通过交叉空对象& {}，我们将类型转换为复合类型，TypeScript会保留定义的别名作为显示名称，同时不会改变类型的实际结构和校验逻辑。

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