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, ...etc.
You can install this extension from the ts-type-expand - Visual Studio Marketplace!
There is nothing additional that needs to be installed.
The following types can be expanded
- Properties
- Array (
TforArray<T>) - Candidate types for union type
- Arguments and return values of functions or methods
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 | ✓ |
We have added a feature that allows you to copy type information as a type alias when you press the COPY button on an expanded type!
This feature is experimental. If you have any feedback, I welcome it through an Issues.
Types are calculated by the CompilerAPI, so all types supported by TypeScript are supported in this extension.
This extension supports Node.js environments, specifically versions v18 and v20. For TypeScript, versions 4.9 through 5.4 are supported. While other versions might work, some features could be unstable or broken.
Outside of Node, the extension is compatible with bun but not with deno. This is because deno does not support the required language service plugin. Therefore, we have no plans to support deno in the future.
- React and Vue (SFC) is supported.
- for using Vue, Hybrid Mode is required.
- Install Vue.volar extension above 2.0.16.
- Enable the Hybrid Mode. (from UI or set
"vue.server.hybridMode": truein .vscode/settings.json)
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.
| command | effect |
|---|---|
ts-type-expand.restart |
Update configuration and restart extension |
MIT
Welcome.