122

If I have a collection of types that looks a bit like this:

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 a hypothetical tooltip should 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?

1

2 Answers 2

181

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;

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.

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 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.


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

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.

Link to code

9
  • 2
    Thanks so much for this, I've wanted something like this ever since I started out on Typescript - such a cool hack. Nov 8, 2019 at 19:10
  • 14
    If you're using this with VS Code and want to see full expanded types via IntelliSense, you might also want to enable noErrorTruncation in your tsconfig.json (see stackoverflow.com/a/53131824/146044)
    – backus
    Mar 24, 2020 at 22:07
  • 7
    Oh man, your Expand should be built-in utility type Alias<T> or something. Oct 9, 2020 at 15:41
  • 2
    This is neat but it turns functions into empty objects as they extend object but don't have any properties. Mar 17, 2021 at 12:05
  • 2
    Like this version maybe? If you need more or something else, please open a new question post about it.
    – jcalz
    Apr 2 at 18:28
55
+250

Just supplementing jcalz's answer with versions which work with functions.

The modified helpers:

export type Expand<T> = T extends (...args: infer A) => infer R
  ? (...args: Expand<A>) => Expand<R>
  : T extends infer O
  ? { [K in keyof O]: O[K] }
  : never;

export type ExpandRecursively<T> = T extends (...args: infer A) => infer R
  ? (...args: ExpandRecursively<A>) => ExpandRecursively<R>
  : T extends object
  ? T extends infer O
    ? { [K in keyof O]: ExpandRecursively<O[K]> }
    : never
  : T;

To test, I'm adding a subobject key to Text type, and adding a function interface:

type Text = Decorated &
  Injected & {
    name: string;
    type: "text";
    value: string;
    subobject: Injected;
  };

interface SomeFunction {
  (...args: Text[]): Injected & { error: boolean };
}

This gives:

enter image description here

expanded once type hover

recursive type hover

Objects still work fine:

enter image description here enter image description here

3
  • 5
    Wow this works great, maybe there's a way to write an extension that integrates with IntelliSense to implement this.....
    – Gifford N.
    Aug 31, 2022 at 20:26
  • Is there a way to save the expanded structure somehow to clipboard/file? Because when the type structure has many members, the result gets truncated... Or at least is there a way to see the complete expansion without truncation? Oct 20, 2022 at 6:01
  • 1
    @RobertKoritnik backus's comment had a good solution for you in the comments for jcalz's answer: If you're using this with VS Code and want to see full expanded types via IntelliSense, you might also want to enable noErrorTruncation in your tsconfig.json (see stackoverflow.com/a/53131824/146044)
    – MHebes
    Oct 20, 2022 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.