I've created a VSCode extension that makes complex types easier to read, and I'll show you how to use it!

Motivation

When I'm writing TypeScript, it sometimes hard-to-read complex types for me, so I often need to bind them to variables and use completion to find properties. I was wondering if there was something I could do to see the expanded types.

I found out about TypeScript's CompilerAPI, so I thought it would be a good idea to extract the type and pass it to the VSCode Tree View, so I made it.

What I made

An extension that can expand TypeScript type definitions

You can install from ts-type-expand - Visual Studio Marketplace.

Like this, You can expand and check the hard-to-read types on VSCode as many times as you need.

If you hover over a variable, you will see the type information, but it sometimes hard to read like XXX & YYY & ZZZ and you won't know what the final type is. This extension is useful in such cases.

As for the supported types, CompilerAPI does the type resolution for you, so if TypeScript supports it, you should be able to expand all of them.

As for valid nodes can be selected is shown in repository, so please see it. but, you should be able to get types from most of the nodes you intuitively think you can get.

How to

CompilerAPI retrieves the type information of the selected node on VSCode and passes it to the Tree View.

After learning the basic usage by referring to the official material, I created an extension to retrieve the type information.

It was quite difficult because the necessary types for receiving Union types were not provided (the actual types existed, but there were no type definitions, so I had to find the properties by hand and use them), and the documentation was not very complete, so I did not know how to get the types I wanted.

Tree View API

The extracted types are expanded in VSCode's TreeView.

This API is quite simple, so I was able to create it without too much trouble.

However, the situation where we want to expand a type is

• Properties
• Candidates for Union type
• Candidates for Enum
• Function expansion (arguments and return value)

So when I tried to use it, I could understand that it could be expanded, but I couldn't understand why it could be expanded.

Eventually.

In this way, I have added information about what can be expanded (Properties, Union or Function).

Summary

In this post, I introduced ts-type-expand, an extension that can help you when you are reading hard to read types such as auto-generated types from GraphQL schemas or when the types provided by the library are difficult to understand.

Please try it out!