使用Paste JSON as Code插件实现json格式转typeScript语法格式

最新推荐文章于 2025-03-23 10:00:00 发布

Vinca@

最新推荐文章于 2025-03-23 10:00:00 发布

阅读量950

点赞数 1

分类专栏： TS 文章标签： json typescript 前端 vscode vue.js

本文链接：https://blog.csdn.net/weixin_45687201/article/details/132972070

版权

TS 专栏收录该内容

3 篇文章

订阅专栏

文章介绍了如何在VSCode中使用PasteJSONasCode插件将JSON文件转换为TypeScript接口定义，提供两种操作方法，包括通过命令面板和创建临时文件直接粘贴JSON内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Paste JSON as Code实现json转typeScript

【软件】vscode软件

创建test.json文件

{
  "name": "John",
  "age": 30,
  "isStudent": true,
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "country": "USA"
  },
  "hobbies": ["reading", "painting", "playing guitar"],
  "education": {
    "degree": "Bachelor",
    "major": "Computer Science",
    "university": "ABC University",
    "completed": true
  },
  "friends": [
    {
      "name": "Sarah",
      "age": 28,
      "address": {
        "street": "456 Elm St",
        "city": "Los Angeles",
        "country": "USA"
      },
      "isCloseFriend": true
    },
    {
      "name": "Michael",
      "age": 32,
      "address": {
        "street": "789 Oak St",
        "city": "Chicago",
        "country": "USA"
      },
      "isCloseFriend": false
    }
  ],
  "hasPets": false
}

ctrl+shift+P打开命令面板或查看-命令面板

输入json，选择Open quicktype for JSON，即可生成QuickType.ts文件

// Generated by https://quicktype.io
//
// To change quicktype's target language, run command:
//
//   "Set quicktype target language"

export interface Test {
    name:      string;
    age:       number;
    isStudent: boolean;
    address:   Address;
    hobbies:   string[];
    education: Education;
    friends:   Friend[];
    hasPets:   boolean;
}

export interface Address {
    street:  string;
    city:    string;
    country: string;
}

export interface Education {
    degree:     string;
    major:      string;
    university: string;
    completed:  boolean;
}

export interface Friend {
    name:          string;
    age:           number;
    address:       Address;
    isCloseFriend: boolean;
}

复制到相对应的ts文件中编修即可，非常方便。

另外一种操作方式

ctrl+N创建一个临时文件 Untitled-1，随意输入以下代码，并ctrl+A全选复制，创建test.ts文件，ctrl+shift+p输入json，选择Paste JSON as Code。根据提示输入名称(Paste)回车。

{
    "name": "John",
    "age": 30,
    "isStudent": true,
    "address": {
      "street": "123 Main St",
      "city": "New York",
      "country": "USA"
    },
    "hobbies": ["reading", "painting", "playing guitar"],
    "education": {
      "degree": "Bachelor",
      "major": "Computer Science",
      "university": "ABC University",
      "completed": true
    },
    "friends": [
      {
        "name": "Sarah",
        "age": 28,
        "address": {
          "street": "456 Elm St",
          "city": "Los Angeles",
          "country": "USA"
        },
        "isCloseFriend": true
      },
      {
        "name": "Michael",
        "age": 32,
        "address": {
          "street": "789 Oak St",
          "city": "Chicago",
          "country": "USA"
        },
        "isCloseFriend": false
      }
    ],
    "hasPets": false
  }

// Generated by https://quicktype.io

export interface Paste {
  name:      string;
  age:       number;
  isStudent: boolean;
  address:   Address;
  hobbies:   string[];
  education: Education;
  friends:   Friend[];
  hasPets:   boolean;
}

export interface Address {
  street:  string;
  city:    string;
  country: string;
}

export interface Education {
  degree:     string;
  major:      string;
  university: string;
  completed:  boolean;
}

export interface Friend {
  name:          string;
  age:           number;
  address:       Address;
  isCloseFriend: boolean;
}

市场：Paste JSON as Code - Visual Studio Marketplace