var-to-type

Features

Generate Type Command: This extension adds a command to VSCode to generate typings from selected variables in the code editor, also suports JSON objects.

Looks like

JSON selection

Json type image

JSON generation

Json selection image

Variable selection

Variable selection image

Typing generation

Typing generation image

Usage

To use the typing generation feature, follow these steps:

Select the variable or a json object that you want to type in the code editor.
Click on the right mouse button to open the context menu.
Select the Var to type menu.
The typing will be generated and show in a textDocument editor. So if you want to save it, you can do it manually.

Settings

This extension provides the following settings:

useTypeAlias: Defines whether to use type aliases (type) or interfaces (interface) for typings. Default is true.
rootName: Defines the root name to be used for the generated typings. Default is an empty string.

to edit these settings, go to File > Preferences > Settings and search for vscode-extensions. Or edit the settings.json file directly by adding the following configuration:

{
  "varToType.configs": {
    "useTypeAlias": true, // or false -> type or interface || default is true
    "rootName": "MyRootName" // use variable name as default
  }
}

Example Usage

  {
    "name": "John",
    "age": 30
  }

// After selecting the JSON object and executing the var to type command:
// The following typing will be generated:

type RootName = {
  name: string;
  age: number;
};

const foo = {
  bar: 12,
  baz: "hello",
};

// After selecting the 'foo' variable and executing the var to type command:
// The following typing will be generated:

type Foo = {
  bar: number;
  baz: string;
};

// Or if you have the useTypeAlias setting set to false:

interface Foo {
  bar: number;
  baz: string;
}

// Or if you have the rootName setting set to 'MyRootName':

type MyRootName = {
  bar: number;
  baz: string;
};

// Anothers array example

const arr = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
];

// After selecting the 'arr' variable and executing the var to type command:

type Arr = {
  name: string;
  age: number;
}[];

important: If you are using interfaces the extension will not generate the array type, you need to add it manually. Interfaces are objects oriented and do not support arrays in the root.

Everton Adame