如何查看无法在弹窗完整显示的大型复杂TypeScript类型？

你遇到的是VSCode对长类型或复杂联合类型自动缩略的情况，以下是几种查看完整类型的方法：

原生方法 #

• 展开悬停弹窗：在悬停显示的类型弹窗里，点击带有...的缩略位置，就能展开被隐藏的属性或联合类型分支。
• 转到定义/类型定义：右键目标变量或类型名，选择「转到定义」（快捷键F12），直接跳转到类型的原始定义处查看完整结构；也可以通过命令面板（Ctrl+Shift+P/Cmd+Shift+P）执行TypeScript: Go to Type Definition快速定位。
• 调整VSCode配置：打开设置（Ctrl+,/Cmd+,），搜索typescript.hover.maxArrayElements和typescript.hover.maxObjectKeys，增大这两个参数的数值，减少悬停时的类型缩略频率。

第三方扩展 #

• TypeScript Hero：支持一键展开完整类型，提供结构化的类型展示，还能辅助类型重构等操作。
• Peek Type Definition：增强原生的peek功能，在弹窗内即可查看嵌套类型的完整结构，无需跳转文件。

你的示例类型缩略情况如下：

type SupportedNetworkKeyz = {
    ethereum: string;
    avalanche: string;
    polygon: string;
    optimism: string;
    bsc: string;
    arbitrumOne: string;
    mantle: string;
    zora: string;
    base: string;
    goerli?: undefined;
    mumbai?: undefined;
    fuji?: undefined;
    ... 6 more ...;
    ethereumSepolia?: undefined;
} | {
    ...;
}

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