CODEWITHSUNDEEP
typescript
Nurbol Alpysbayev
Nurbol Alpysbayev

Reputation: 21891

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

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.

Upvotes: 1

Views: 1617

Answers (1)

Matt McCutchen
Matt McCutchen

Reputation: 30919

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.

Upvotes: 2

Related Questions