Console.log TypeScript Type Outputs

Short answer is: You can’t

But there are other options! These options help you:

Expand the … N more … values in your intellisense pop-up window

Expand Type contracts to view all properties in a combined type without using the subtype names.

1 - Use Expanded Intellisense in VSCode

In your tsconfig.json add "noErrorTruncation": true, like so:

{
  "compilerOptions": {
    "noErrorTruncation": true,
    "target": "es2016",   
    ...
  }
}

Before Expanded Intellisense

After Expanded Intellisense

For more on this see this Stackoverflow thread

2 - Use Helper Functions

These are sourced from this stackoverflow thread

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;

Before Helper Functions

After Helper Functions

Did you know?

Typescript has a hard limit of 25 members when using union of mapped types?

If like me you didn’t and find it interesting you can read more about it here.

That’s all for now.

If you found this useful please like, share, or comment with other methods you use to inspect the expanded value of your typescript types.

How to Console.log Typescript Type Output Value

Comments

Typescript Lessons

More from this blog

WIP - An Introduction to eBPF (extended Berkeley Packet Filter) and XDP (eXpress Data Path)

Tinkerer Journal: Hosting my own ATProto server with a Custom Domain and Google's SMTP server

Tinkerer journal: How to Transfer a Domain from Squarespace to Cloudflare

From Tweet to AI Prototype: Building a Working PoC in Minutes with Claude and Replit

1 - Use Expanded Intellisense in VSCode

Before Expanded Intellisense

After Expanded Intellisense

2 - Use Helper Functions

Before Helper Functions

After Helper Functions

Did you know?

Command Palette

Comments

Typescript Lessons

More from this blog

1 - Use Expanded Intellisense in VSCode

Before Expanded Intellisense

After Expanded Intellisense

2 - Use Helper Functions

Before Helper Functions

After Helper Functions

Did you know?