如何查看 Typescript 类型的完整扩展合同? [英] How can I see the full expanded contract of a Typescript type?

问题描述

如果我有一个看起来有点像这样的类型集合，那就更详细了:

If I have a collection of types that looks a bit like this, only more verbose:

type ValidValues = string | number | null
type ValidTypes = "text" | "time" | "unknown"

type Decorated = {
  name?: string | null
  type?: ValidTypes
  value?: ValidValues
  title: string
  start: number
}

type Injected = {
  extras: object
}

// overriding the types from Decorated
type Text = Decorated & Injected & {
  name: string
  type: "text"
  value: string
}

我的实际代码还有更多内容，但这显示了核心思想.我不想必须相信自己才能使类型之间的关系恰到好处.我想要工具向我展示 Text 的类型定义评估"到什么，毕竟是类型代数.

My actual code has more going on, but this shows the core idea. I don't want to have to trust myself to get the relationships between types just right. I want tooling to show me what the type definition for Text "evaluates" to, after all the type algebra.

因此，对于上面的示例，我希望 Text 中指定的字段将覆盖在 Decorated 类型中所做的先前声明，以及我假设的工具提示的输出会(我希望)给我看这样的东西:

So for the above example, I'm hoping the fields specified in Text will override the previous declarations made in the Decorated type, and the output of my hypothetical tooltip would (I hope) show me something like this:

{
  name: string
  type: "text"
  value: string
  title: string
  start: number
  extras: object
}

有什么方便的方法可以获取这些信息吗?

Is there any convenient way to get this information?

推荐答案

使用 IntelliSense 经常会留下一些不足之处；您通常会得到任何给定类型的单一表示，这对于您的目的来说可能过于简洁甚至过于冗长.有一些建议可以使它更灵活(例如，microsoft/TypeScript#25784 和microsoft/TypeScript#28508) 以便用户可以在其 IDE 中展开/折叠类型定义.但我不知道他们是否会在近期甚至远期采取行动，所以让我们不要等待.

The quick info for a type displayed with IntelliSense often leaves something to be desired; you generally get a single representation for any given type, which may turn out to be too terse or even too verbose for your purposes. There are a few suggestions to make it more flexible (e.g., microsoft/TypeScript#25784 and microsoft/TypeScript#28508) so that users could expand/collapse type definitions in their IDEs. But I don't know if they will get acted on in the near or even far future, so let's not wait around for that.

这是我有时用来尝试以您所谈论的方式扩展类型的类型别名:

Here is a type alias I sometimes use to try to expand a type in the way you're talking about:

// expands object types one level deep
type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;

// expands object types recursively
type ExpandRecursively<T> = T extends object
  ? T extends infer O ? { [K in keyof O]: ExpandRecursively<O[K]> } : never
  : T;

那些使用 条件类型推断将一个类型T复制"到一个新的类型变量O，然后是一个类似身份的映射类型，它遍历复制的类型的属性.

Those use conditional type inference to "copy" a type T into a new type variable O and then an identity-like mapped type which iterates through the copied type's properties.

条件类型推断在概念上是一个空操作，但它用于分布联合类型 并强制编译器评估条件的真"分支(如果你重新定义 Expand 而没有它，有时编译器只会输出映射类型{[K in keyof RelevantType]: RelevantType[K]}，这不是你想看到的.

The conditional type inference is conceptually a no-op, but it's used to distribute union types and to force the compiler to evaluate the "true" branch of the conditional (if you redefine Expand<T> without it, sometimes the compiler will just output the mapped type {[K in keyof RelevantType]: RelevantType[K]}, which is not what you want to see).

Expand 和 ExpandRecursively 之间的区别在于它是否应该按原样吐出属性类型(Expand)，或者如果它应该扩展属性类型(ExpandRecursively).它有助于在递归情况下不要尝试深入到原始类型，这就是为什么要包含 T extends object 条件.

The difference between Expand and ExpandRecursively is whether it should just spit out the property types as-is (Expand), or if it should expand the property types (ExpandRecursively). It helps in the recursive case not to try to drill down into primitive types, so that's why T extends object condition is included.

好的，让我们看看当我们在你的类型上使用它时会发生什么.在您的情况下，我们不需要 ExpandRecursively，但我们可以使用它......它给出了相同的结果:

Okay, let's see what happens when we use it on your type. We don't need ExpandRecursively in your case, but we could use it... it gives the same result:

type ExpandedText = Expand<Text>;

当我们在 IDE 中将鼠标悬停在它上面时(无论如何都是 TypeScript Playground 和 VSCode)，显示为:

which, when we hover over it in the IDE (The TypeScript Playground and VSCode anyway), is displayed as:

/* type ExpandedText = {
  name: string;
  type: "text";
  value: string;
  title: string;
  start: number;
  extras: object;
 } */

如你所愿.好的，希望有帮助；祝你好运！

as you wanted. Okay, hope that helps; good luck!

代码链接

这篇关于如何查看 Typescript 类型的完整扩展合同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！