d-kimuson/ts-type-expand

vscode extension for expand type of typescript

ts-type-expand for VSCode

📝 ts-type-expand is now v1 and the mechanism behind it has changed. You can downgrade to v0.12 if you find it inconvenient.

VSCode extension that allows you to expand TypeScript type definitions.

• Displays the type information of the selected node
• This is especially useful for hard-to-read types, such as those automatically generated from GraphQL schemas.

Installation

You can install this extension from the ts-type-expand - Visual Studio Marketplace!

There is nothing additional that needs to be installed.

Supports

Expansion

The following types can be expanded

• Properties
• Array (T for Array<T>)
• Candidate types for union type
• Arguments and return values of functions or methods

Selection

The following are the destination nodes that support type expansion. More nodes will be added in the future.

Statements	Support
TypeAlias declaration	✓
Interface declaration	✓
Varibale declaration	✓
Varibale statement	✓
Class declaration	✓
Function declaration	✓
Function call	✓
Function argument	✓
Method declaration	✓
Enum Declaration	✓
Enum statement	✓

Types

Types are calculated by the CompilerAPI, so all types supported by TypeScript are supported in this extension.

Others

• SFC for Vue is not supported
• React is supported.

Configure

Configure ts-type-expand.* to your vscode config to customize.

key	value	default
compactOptionalType	display T? for type T | undefined	true
compactPropertyLength	Omit when the type can be expanded and the number of characters of the type is longer than this length.	10
directExpandArray	Directly expand T for Array<T>	true
validate	Validate by specifying languageId	["typescript", "typescriptreact", "javascript", "javascriptreact"]

In order for these settings to take effect, you need to run ts-type-expand.restart or reload the VSCode after making the changes.

Commands

command	effect
ts-type-expand.restart	Update configuration and restart extension

License

MIT

Contribute

Welcome.

📝

For debugging purposes, it is recommended to put a symbolic link to the directory where the logs are written.

$ ln -s ~/.ts-type-expand/logs ./logs

To start the debugger in a plain environment, you must enable Workbench > Experimental > Settings Profile. This setting does not exist in the per-workspace settings, only in the user settings, and must be set individually by the developer.

ts-type-expand's Issues

Support function arg selection

Support generics

Date type should be expanded as Date

1.0.1 version not displaying anything

Can I start by saying I absolutely love this extension, and I can't believe I have only just found it! Super super useful stuff.

I wanted to let you know that the display of the type-tree doesn't seem to render at all in the new 1.x version. I was able to use it just fine with the latest 0.x version, so that's what I'll be using for now, but felt I should make a bug report.

I am on an Intel MacBook Pro (2019) running Monterey 12.6.3. When I try to load the updated extension I get the toast activation message saying it is ready to use, and the title of the sidebar section reads TS TYPE EXPAND (ACTIVE) but the section is completely blank no matter what files I open or what types I click on.

Let me know if you need any more details. Thanks for all your hard work!

Add option to compact long types.

Cannot load extension if file is not opened

Bug: `let` Variables defined in the function are expanded as arguments.

function foo(arg1: string, arg2: string): number {
  let Foo: string       // this is registered as arg3
  const f = () => ...  // this is regsited as arg4
}

Functions defined within a function are also expanded as argument types.

Support import statement

Support variable selection

Using `language-service-plugin` to get type information

Currently, building the Compiler API program in watch mode, so we are picking up

• It takes a long time to start up, and there are many overlapping processes
• Real-time type retrieval is not possible (the editor has new type information before OnSave, but the extension does not).
• The version of project's TypeScript and the version of TS used by this extension are different. As a result, the types that are resolved may change.

If you can receive the type information from VSCode's Language Server by some means, all these problems will be solved.

I found an issue that might be useful, so I created an issue.

microsoft/TypeScript#46701

Support multi-workspace

Support property of class expand

Support windows

In Windows, I get the following error when selecting a node

Error: Node is not defined
    at JP.getTypeFromLineAndCharacter (C:\\Users\\owner\\.vscode\\extensions\\kimuson.ts-type-expand-1.0.1\
ode_modules\\ts-type-expand-plugin\\dist\\index.js:627:2978)
    at C:\\Users\\owner\\.vscode\\extensions\\kimuson.ts-type-expand-1.0.1\
ode_modules\\ts-type-expand-plugin\\dist\\index.js:627:4637
    at HC.middlewares (C:\\Users\\owner\\.vscode\\extensions\\kimuson.ts-type-expand-1.0.1\
ode_modules\\ts-type-expand-plugin\\dist\\index.js:618:122618)
    at d (C:\\Users\\owner\\.vscode\\extensions\\kimuson.ts-type-expand-1.0.1\
ode_modules\\ts-type-expand-plugin\\dist\\index.js:627:179)
    at next (C:\\Users\\owner\\.vscode\\extensions\\kimuson.ts-type-expand-1.0.1\
ode_modules\\ts-type-expand-plugin\\dist\\index.js:627:282)
    at n (C:\\Users\\owner\\.vscode\\extensions\\kimuson.ts-type-expand-1.0.1\
ode_modules\\ts-type-expand-plugin\\dist\\index.js:618:121620)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async d (C:\\Users\\owner\\.vscode\\extensions\\kimuson.ts-type-expand-1.0.1\
ode_modules\\ts-type-expand-plugin\\dist\\index.js:627:173)
    at async next (C:\\Users\\owner\\.vscode\\extensions\\kimuson.ts-type-expand-1.0.1\
ode_modules\\ts-type-expand-plugin\\dist\\index.js:627:276)
    at async d (C:\\Users\\owner\\.vscode\\extensions\\kimuson.ts-type-expand-1.0.1\
ode_modules\\ts-type-expand-plugin\\dist\\index.js:627:173)
    at async next (C:\\Users\\owner\\.vscode\\extensions\\kimuson.ts-type-expand-1.0.1\
ode_modules\\ts-type-expand-plugin\\dist\\index.js:627:276)

Code base is here.

https://github.com/d-kimuson/ts-type-expand/blob/master/packages/ts-type-expand-plugin/src/service/compiler-api-handler.ts#L52~L54

Resolve this problem and make it usable for Windows

Return type of "async () => {}" is displayed as "void"

There seems to be something wrong with the handling of async function objects.

Steps to Reproduce

1. Write the following code.
2. Open the ts-type-expand panel.
3. Point foo.

const foo = async () => { };

Expected
ts-type-expand displays the return type of foo as Promise<void>.

Actual
It displays this type as void.

Additional info
const bar= async (): Promise<void> => { }; will be displayed as any.

`HOME_DIR` is not defined, leading to Error UnExpected

src/utils/logger.ts

process.env["HOME"] is not defined

I'm using Windows 11

Support array expand

Support `tsconfig.json` path in settings.json

Support expand function related types (args, returns)

Support TypeReference expand

const name: string  // here

String literal types should be marked with double quotes

String literals of the same name as a particular type are indistinguishable in the extension

Ex.

Let the string "string" have the type

It displays body: string. We can't tell if it expects a string type or "string" as a literal

Support function name

Automatically enable extension

Option to omit properties starting with _

Many properties starting with _ are private and often noisy.
I would like to provide an option to make this optional.

Also, it would be better to have the sort order backward by default

INTERNAL_SERVER_ERROR, Error: Node is not defined

The extension doesn't seem to work on my side. Here is the error I get:

{
  "context": "ts-type-expand",
  "level": "error",
  "message": {
    "error": {
      "data": {
        "code": "INTERNAL_SERVER_ERROR",
        "httpStatus": 500,
        "path": "getTypeFromPos",
        "stack": "TRPCError: error: Error: Node is not defined\n    at /home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:4962\n    at HC.middlewares (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:618:122618)\n    at d (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:179)\n    at next (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:282)\n    at n (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:618:121620)\n    at process.processTicksAndRejections (node:internal/process/task_queues:96:5)\n    at async d (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:173)\n    at async next (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:276)\n    at async d (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:173)\n    at async next (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:276)"
      },
      "meta": {
        "response": {
          "size": 0
        }
      },
      "name": "TRPCClientError",
      "shape": {
        "code": -32603,
        "data": {
          "code": "INTERNAL_SERVER_ERROR",
          "httpStatus": 500,
          "path": "getTypeFromPos",
          "stack": "TRPCError: error: Error: Node is not defined\n    at /home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:4962\n    at HC.middlewares (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:618:122618)\n    at d (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:179)\n    at next (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:282)\n    at n (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:618:121620)\n    at process.processTicksAndRejections (node:internal/process/task_queues:96:5)\n    at async d (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:173)\n    at async next (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:276)\n    at async d (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:173)\n    at async next (/home/victus/.vscode/extensions/kimuson.ts-type-expand-1.0.1/node_modules/ts-type-expand-plugin/dist/index.js:627:276)"
        },
        "message": "error: Error: Node is not defined"
      }
    },
    "kind": "TRPC_SERVER_ERROR"
  }
}

Is this extension broken?

Installed it, restarted VSCode and opened the TS-Type-Expand window, but nothing happens when I click different types in the editor, it's just blank and empty.

Support for monorepo and multiple tsconfig.json

Thanks for the great extension. Would be great if it can support monorepo setups like Yarn workspaces that has multiple tsconfigs across the different packages in the monorepo.

Support reflect realtime edit

Feature request: Volar takeover mode compatibility

Volar (extension for working with Vue) has a takeover mode in which you disable built-in TypeScript extension and use Volar exclusively, which makes it more performant, because then only 1 language server needs to be created. Unfortunately, this makes it impossible to use this extension, because it depends on the built-in TypeScript extension. It would be great if both could work together, since theoretically Volar should be just an extended built-in language server (although I cannot tell for sure).

Node auto expansion

Add some options to allow users to setup auto expansion or at least expand the first level automatically.

[Bug] Extension have no effect in Linux

Whatever type I select, nothing never appeared inside the panel

Here is a single example:

Peek.2021-09-03.08-30.mp4

VSCode Typescript version: 4.4.2
Local Typescript version: 4.1.6

Doesn't work for some destructured types

It works for simple types, but I have some types deep in my project that typescript is kindly showing as a string on hover but the extension sidebar claims it is of type any.

Bug: string literal type is expandable

string literal type should not be expandable

Change not to load program two times at first

Support enum expand

pin or persist an expanded type

Love this extension! What an awesome effort here. Thank you 🙌🏻 .

Anyway, I'd like to request a feature to "pin" a type or in some way, keep a type active in my viewable field while I change active editors.

I am going to start looking for ways to contribute to the VSCode side of things, so perhaps I will try to achieve something for this, but if you have a preference about a way to do this, let me know. I guess a first good step would just be a little pin icon beside the expanded type which would keep it active until unpinned.

Intersection type is handled as union type

Support property type expand

Support variable type expand