vue之中 把json数据转化为ts限制的类型

vue之中 把json转化为ts

  • vscode安装 插件 json2ts
  • 使用 ctrl + alt + v 去形成 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;
}
}

vue之中 把json格式的数据,转化为ts的type格式

  • 安装 vscode插件
    • JSON Tto TS
  • 快捷键:
    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;
}

猜你喜欢

转载自blog.csdn.net/weixin_43845137/article/details/123723247