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

Question

将鼠标悬停在 VSCode 中的变量或函数上通过显示其类型确实很有帮助。但是，在某些用例中，我希望查看变量的完整类型定义，而不仅仅是类型别名。

例如：完整类型的 UseState 将允许我查看可变广告系列的完整类型：

.

但我真的很想推断该类型定义并将其导出，以便其他组件也可以使用它。所以当我把事情改成这样时： 并将鼠标悬停在变量上，它只显示类型别名。如何让 TypeScript 或 VSCode 发出类型别名的完整类型定义？谢谢！

Answer 1

有一个解决方法对于调试很有用。您必须创建一个类型助手来包装您想要扩展的类型：

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,
};

结果：

感谢马特·波考克。来源：@mattpocockuk 推特

另外，还有一个Github 问题需要 IntelliSense。

Answer 2

要获取类型定义，您需要设置Peek 类型定义命令的快捷方式。默认情况下，它没有值。

首先，您需要使用或通过 UI进入键盘快捷键Ctrl+k Ctrl+s。

然后在搜索栏中输入Peek Type Definition。你会看到相应的命令。

双击它并按首选快捷键。

Answer 3

右键单击并单击go to Type Definition应该始终将您带到打字稿类型。

Answer 4

如何让 TypeScript 或 VSCode 发出类型别名的完整类型定义？

我不相信 VSCode 目前提供此功能，但是我找到了一个鲜为人知的 VSCode 扩展来执行此操作：ts-type-expand。FWIW，我与此扩展或其创建者没有个人联系。我最近发现了它，但到目前为止它似乎像广告中那样工作，并且它直接解决了这个问题。