vue3插件json2ts的使用

1、安装vscode插件json2ts

右键选中插件,修改快捷键方式 ctrl+shift+alt+v

2、复制json格式的数据

2.1、在nuxt中可以使用如下方式copyjson格式数据

{
  "aid": 701297313,
  "type_id": 182,
  "tname": "影视杂谈",
  "pic": "http://i0.hdslb.com/bfs/archive/4e0981141ac047f06118a30f4af322d45f4ce63c.jpg",
  "title": "一口气看完美剧大片《星期三》完整版",
  "pubdate": 1690181679,
  "ctime": 1690181679,
  "tags": [],
  "duration": 2208,
  "author": {
    "mid": 1446209135,
    "name": "番茄君来了",
    "face": "https://i2.hdslb.com/bfs/face/0db953a00ded43b1eec3539b99cd63294ead1283.jpg"
  },
  "stat": {
    "aid": 701297313,
    "view": 362915,
    "danmaku": 392,
    "reply": 171,
    "favorite": 3905,
    "coin": 643,
    "share": 182,
    "now_rank": 0,
    "his_rank": 0,
    "like": 12383,
    "dislike": 0,
    "vt": 0,
    "vv": 362915
  },
  "hot_desc": "",
  "corner_mark": 0,
  "bvid": "BV1Hm4y1L74g",
  "enable_vt": 0
}

3、新建一个ts文件

执行如下快捷键:ctrl+shift+alt+v 

export interface Author {
	mid: number;
	name: string;
	face: string;
}

export interface Stat {
	aid: number;
	view: number;
	danmaku: number;
	reply: number;
	favorite: number;
	coin: number;
	share: number;
	now_rank: number;
	his_rank: number;
	like: number;
	dislike: number;
	vt: number;
	vv: number;
}

export interface RootObject {
	aid: number;
	type_id: number;
	tname: string;
	pic: string;
	title: string;
	pubdate: number;
	ctime: number;
	tags: any[];
	duration: number;
	author: Author;
	stat: Stat;
	hot_desc: string;
	corner_mark: number;
	bvid: string;
	enable_vt: number;
}

 vue3插件json2ts - 掘金 (juejin.cn)

相关推荐

  1. vue3+ts自定义

    2024-03-30 13:34:03       35 阅读
  2. vue3+TS使用component 组实例

    2024-03-30 13:34:03       30 阅读
  3. 使用vue3编写一个

    2024-03-30 13:34:03       19 阅读
  4. vue使用海康web3.2连接云台摄像机

    2024-03-30 13:34:03       22 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-30 13:34:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-30 13:34:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-30 13:34:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-30 13:34:03       20 阅读

热门阅读

  1. Android JNI---入门了解

    2024-03-30 13:34:03       14 阅读
  2. 信号量或互斥锁

    2024-03-30 13:34:03       19 阅读
  3. VSCode中6个AI顶级插件

    2024-03-30 13:34:03       29 阅读
  4. Openreview公式不能正常显示

    2024-03-30 13:34:03       12 阅读
  5. linux终端介绍

    2024-03-30 13:34:03       18 阅读
  6. ChatGPT助力学术写作:快速提升论文质量

    2024-03-30 13:34:03       19 阅读
  7. React中使用antDesign框架

    2024-03-30 13:34:03       17 阅读
  8. 使用 React Router v6.22 进行导航

    2024-03-30 13:34:03       17 阅读