Today I’ll introduce you to my new tool “any-type”, a vscode plugin that generates typescript types from javascript literals.

🔥 Application Scenario

In TS, the data requested by Axios is typed manually for subsequent operations, such as:

const response = await http.get<ResponseData>("/summary");
Copy the code

Here the “ResponseData” type is the description of the interface. Let’s simulate a sales statistics interface.

{
    "code":200."data": [{"name": Pinduoduo."salesCount":"9999"},
        {"name": "Alibaba"."salesCount":"8888"},
        {"name": "The jingdong"."salesCount":"7777"]}},Copy the code

Its type description:

type ResponseData = {
  code: number;
  data: { name: string; salesCount: string} []; };Copy the code

Predictably, “The more complex the interface, the more complex the type.”

⚡ any – type

This type can be generated by “any-type”. The operation is also simple:

  1. Press “F1”, type “generate” on the console, find “⚡ generate typescript type “, and press Enter.

  1. Enter JSON data in the new pop-up input box.

  1. Press Enter, “Type” will automatically insert the type into the editor.

🌈 installation

Search for “any-type” in the vscode store.

⭐ making

If you think any-type is good, please give me a little star 😁 github.com/any86/any-t…

plan

  • Enter the interface address, initiate an HTTP request, and parse the return value.

Leave a comment at 🍭 with better ideas

🍕 Learning interaction

Thank you for your reading. If you have any questions, you can add me to the wechat group, and I will pull you into the wechat group (Because Tencent limits the number of wechat groups to 100, when the number exceeds 100, you must be joined by group members).