logo标签列表

如何在 VSCode 的 TypeScript 中悬停时查看完整类型定义？

typescriptvisual-studio-code
64
在VSCode中悬停在变量或函数上非常有用，因为它会显示其类型。然而，在某些情况下，我希望看到变量的完整类型定义，而不仅仅是类型别名。
例如：使用完整类型的UseState UseState with full type 将允许我看到变量campaign的完整类型。

Hover with full def.

但我真的很想推断出那个类型定义并导出它，以便其他组件也可以使用它。所以当我将东西更改为这样时： UseState with type alias and hover 并悬停在变量上时，它只显示类型别名。如何让TypeScript或VSCode发出类型别名的完整类型定义？谢谢！
你尝试过右键单击并选择转到定义吗？ - ultraGentle
是的，这样做有时会将我送到使用该变量的地方，有时还会显示它所用到的其他位置。虽然很有用，但如果编辑器向我展示那部分内容，我经常使用泛型，此时所有类型定义都会丢失。 - Noah Anderson
1
嗯，这个问题还没有被解决。我也遇到了同样的问题，找不到任何解决方案。 - Simon
1
这个答案有一个类型可以将类型扩展为一个更简单的对象类型，但到处都打Expand有点啰嗦，您不觉得吗;) Playground - zenly
相关的TypeScript功能请求：https://github.com/microsoft/TypeScript/issues/56010。 - undefined
显示剩余3条评论
10个回答
10
要获取类型定义，您需要设置快捷方式到“查看类型定义”命令。默认情况下，它没有值。
首先，您需要使用Ctrl+k Ctrl+s或通过UI进入“键盘快捷方式”。

enter image description here

然后在搜索栏中输入Peek Type Definition。

您将看到相应的命令。

双击它并按下首选快捷键。

enter image description here

就像“转到定义”一样，这只适用于手动编写的类型。 - undefined
@Nickolay，这个问题的背景特别涉及手动书写的类型。也许一个更有建设性的回答会更有益处。 - undefined
当然，你说得对。我的评论是为了那些通过搜索引擎来到这里的人，而不是仔细阅读问题的人。回想起来，我应该编辑问题而不是评论。 - undefined
9
有一个解决办法可以用于调试。你需要创建一个类型辅助器来包装要扩展的类型：
type Prettify<T> = {
  [K in keyof T]: T[K];
} & {};

例子:

type TypeA = {
  name: string;
};

type TypeB = {
  level: number;
};

type TypeC = {
  loading: boolean;
} & (TypeA | TypeB);

// all properties expaned on hover 'obj'
const obj: Prettify<TypeC> = {
  name: 'david',
  level: 2,
  loading: false,
};

Result:

enter image description here

感谢Matt Pocock的贡献。来源：@mattpocockuk twit 此外，还有一个Github问题希望在智能感知中实现这个功能。
这有助于回答具体的问题（查看类型别名背后的属性），而不是解决截断输出的问题。如果属性列表太长，即使使用Prettify<..>也会被截断。 - undefined
8
右键并点击“转到类型定义”应该始终将您带到TypeScript类型。 enter image description here
13
当类型没有在某个地方手动明确定义时，情况就不是这样。 - Kevin Kreps
4
如何让TypeScript或VSCode输出类型别名的完整类型定义？
我不认为VSCode目前提供了这个功能，但是我找到了一个鲜为人知的VSCode扩展ts-type-expand可以实现这个功能。顺便说一句，我与该扩展或其创建者没有任何个人关系。我最近发现它，到目前为止它似乎按照广告所述正常工作，并且直接解决了这个问题。

Screenshot of ts-type-expand extension

3
很遗憾，你列出的那个扩展似乎已经无效了。不过，我找到了一个完全救命的扩展，正好满足大家在这里寻找的需求：https://marketplace.visualstudio.com/items?itemName=mxsdev.typescript-explorer&ssr=false#overview - mrbinky3000
我正在使用这个扩展，就在我们说话的时候...不知道为什么你认为它已经死了，@mrbinky3000？不过，你找到的那个看起来也很有趣。 - John
我安装了ts-type-command，重新启动了vscode，但是没有任何效果。我查看了该项目的Github问题，发现其他人也遇到了同样的问题。其中一个问题是“完全停止工作”。如果你的正常运行，请不要升级 :-) - mrbinky3000
是的：https://github.com/d-kimuson/ts-type-expand/issues/353 - TonyG
2
我有一个派生的联合，大约有200个键从另一个对象中筛选出来，其他答案都没有解决这个问题。这很有帮助。另外，上面评论中提到的问题已经修复，项目并没有停止。 - undefined
3
很遗憾，我认为你想要的不可能实现。
VSCode的悬停功能只是为了快速显示值的类型信息，而不是完整的类型。事实上，我相信这个功能是由TypeScript直接提供支持的，因此VSCode无法控制显示的内容...
最后需要注意的一点是，所显示的内容大小有限（可能是出于性能考虑），因此即使在显示类型定义的情况下，如果太长，有时也会被简单地截断。
2
但我认为微软可以添加一个选项来扩展悬停画布。例如，在jsdocs中，您可以扩展画布以查看整个文档。特别是对于npm库“zod”，其中类型非常长。#zod #type - Charles-Lévi BRIANI
2

前往键盘快捷方式并添加“添加Peek Definition”的快捷方式。此功能适用于TypeScript和Golang结构。在我的情况下，我使用的是alt+command+P。

我将突出显示变量并按下键盘快捷键，然后类型定义会像屏幕截图中那样显示。

enter image description here

1
你可以尝试使用“窥视定义”选项，快捷键为Alt + F12。在这种情况下，它可能会有所帮助。
未找到__name__的类型定义。不具有帮助性。 - TonyG
1
在Mac上悬停时按下CMD键（可能是Windows上的CTRL键），您将看到完整的类型定义。
0

测试一下：

const [campaigns,setCampigns]= useState<{ [K in keyof campaigns]: campaigns[K]}>()

虽然不是最优的，但你仍然可以这样做。

不行 - 在Windows上尝试了所有的c/s/a+mouseover，唯一提供的是别名，没有揭示这个别名所派生的类型的见解。 - TonyG
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接