Convert json data to ts restricted type in vue

Convert json to ts in vue

• vscode install plugin json2ts
• Use ctrl + alt + v to form the type mode of ts

test.json

{
    
    
  "diseaseh5Shelf": {
    
    
    "lastUpdateTime": "2022-03-24 20:40:02",
    "chinaTotal": {
    
    
      "confirm": 443723,
      "importedCase": 17096,
      "dead": 12261,
      "suspect": 13,
      "noInfect": 24062,
      "heal": 159794,
      "nowConfirm": 271668,
      "nowSevere": 50,
      "showLocalConfirm": 1,
      "localConfirm": 26671,
      "noInfectH5": 22564,
      "localConfirmH5": 24953,
      "showlocalinfeciton": 1,
      "local_acc_confirm": 139285
    },
    "chinaAdd": {
    
    
      "heal": 2362,
      "suspect": 1,
      "nowSevere": 0,
      "importedCase": 44,
      "noInfect": 2829,
      "localConfirm": 3012,
      "noInfectH5": 2722,
      "confirm": 5076,
      "nowConfirm": 2308,
      "localConfirmH5": 2010,
      "dead": 406
    }
  }
  // ctrl + alt + v
  // 效果
  export interface ChinaTotal {
    
    
	confirm: number;
	importedCase: number;
	dead: number;
	suspect: number;
	noInfect: number;
	heal: number;
	nowConfirm: number;
	nowSevere: number;
	showLocalConfirm: number;
	localConfirm: number;
	noInfectH5: number;
	localConfirmH5: number;
	showlocalinfeciton: number;
	local_acc_confirm: number;
}

export interface ChinaAdd {
    
    
	heal: number;
	suspect: number;
	nowSevere: number;
	importedCase: number;
	noInfect: number;
	localConfirm: number;
	noInfectH5: number;
	confirm: number;
	nowConfirm: number;
	localConfirmH5: number;
	dead: number;
}

export interface Diseaseh5Shelf {
    
    
	lastUpdateTime: string;
	chinaTotal: ChinaTotal;
	chinaAdd: ChinaAdd;
}

export interface RootObject {
    
    
	diseaseh5Shelf: Diseaseh5Shelf;
}
}

In vue, the data in json format is converted into the type format of ts

• Install the vscode plugin
  • JSON Tto TS
• Shortcut:
  ctrl + shif + alt + v || s

{
    
    
  "data": [{
    
    
    "name": "菜鸡",
    "price": 111,
    "id": 111
  }, {
    
    
    "name": "菜狗",
    "price": 222,
    "id": 222
  }, {
    
    
    "name": "菜鸟",
    "price": 333,
    "id": 333
  }]
}
效果：
interface RootObject {
    
    
  name: string;
  price: number;
  id: number;
}