Search code examples
typescriptvisual-studio-code

How do I view large typescript types in VSCode?


I have a large type like this one:

type Large = {
    foo: 123,
    bar: 123,
    baz: 123
} | {
    foo: 123,
    bar: 123,
    baz: 123
} | {
    foo: 123,
    bar: 123,
    baz: 123
} | {
    foo: 123,
    bar: 123,
    baz: 123
} | {
    foo: 123,
    bar: 123,
    baz: 123
} | {
    foo: 123,
    bar: 123,
    baz: 123
} | {
    foo: 123,
    bar: 123,
    baz: 123
} | {
    foo: 123,
    bar: 123,
    baz: 123
} | {
    foo: 123,
    bar: 123,
    baz: 123
}

And this is how it gets shortened in VSCode when hovered:

enter image description here

How do I view the hidden part? Any suggestions would be appreciated.

P.S. Of course the type I am trying to view is not that simple and it's not statically written as well.


Solution

  • There is a seemingly unrelated compiler setting called noErrorTruncation. It controls if types are truncated in errors. If you set this compiler option to true it will also prevent type truncation in tooltips.

    Note This will prevent truncation of types (the ... part) it will not unfortunately force the expansion of mapped or conditional types.