Typescript: Visualize type, i.e. show type's signature

Question

When we want to see variable's value, we just do console.log(someVar)

What about if we want to see what is there behind a type?

Example:

type SomeUnion = 'foo' | 'bar' | 'baz'

console.log(SomeUnion) 
// of course above will not work, but what will do?
// is there any TS tool that I am missing?

P.S. For those who might not understand why would one need this, here is much more complex type (from TS docs):

type FunctionPropertyNames<T> = { [K in keyof T]:
T[K] extends Function ? K : never }[keyof T];

interface Part {
    id: number;
    name: string;
    subparts: Part[];
    updatePart(newName: string): void;
}

type T40 = FunctionPropertyNames<Part>;  // "updatePart"

The last line has comment with what the type looks like. Currently what am I doing to find out if it really looks like this is something like:

let foo: T40 = 'bar' // gives error: type "bar" is not assignable to type "updatePart"

In other words, the only way to know what is hidden behind the type identifier is to generate a type error, which should not be the only way to do it.

I don't think there is any tool that will do this statically, but you can try to do an instance of the object and call Object.keys() on that. See this https://stackoverflow.com/a/43910186/1486848 — ShamPooSham, Sep 17 '18 at 13:53

score 2 · Accepted Answer · answered Sep 17 '18 at 14:08

2

If you use the playground (current caveat) or an IDE such as Visual Studio Code that supports the TypeScript language service, you can just hover over the T40 in type T40 = FunctionPropertyNames<Part>; to see the expansion of the type.

answered Sep 17 '18 at 14:08

Matt McCutchen

28,856
2
68
75

Mostly, sometimes, for some types .... It works in this case but it's been my experience that the type is not always fully expanded, still better then nothing :) – Titian Cernicova-Dragomir Sep 17 '18 at 14:17

Typescript: Visualize type, i.e. show type's signature

1 Answers1