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
}
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.
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?
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:
Those use conditional type inference to "copy" a type
T
into a new type variableO
and then an identity-like mapped type which iterates through the copied type's properties.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).The difference between
Expand
andExpandRecursively
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 whyT extends object
condition is included.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:which, when we hover over it in the IDE (The TypeScript Playground and VSCode anyway), is displayed as:
as you wanted. Okay, hope that helps; good luck!
Link to code