将API接口返回的数据直接转换成typescript支持的type类型

将API接口返回的数据直接转换成typescript支持的type类型

问题描述

在使用taro进行微信小程序的开发的时候，采用typescript可以很好地管理数据类型，但是接口数据类型要自己一个一个写，太麻烦了！

问题解决

下面的函数，可以通过递归的方式自动输出数据类型：

function getType (data) {
  if (typeof data === 'object') {
    if (typeof data.length !== 'undefined') {
      if (data.length > 0) {
        return `Array<${getType(data[0])}>`
      } else {
        return 'Array<any>'
      }
    }
    const keys = Object.keys(data)
    if (keys.length === 0) {
      return 'object'
    }
    let a = Object.keys(data).map(v => {
      const type = getType(data[v])
      return `${v}: ${type}`
    }).join(',\n')
    a = `{\n${a}\n}`
    return a
  } else {
    return typeof data
  }
}

在微信小程序的console窗口中，可以在代码中先给wx绑定这个函数，然后就可以使用了，记住需要将函数内部的getType替换成wx.getType。即在小程序启动的时候执行下面的代码就行了：

wx.getType = (data) {
	if(typeof data === 'object') {
	   if (typeof data.length !== 'undefined') {
	     if (data.length > 0) {
	       return `Array<${wx.getType(data[0])}>`
	     } else {
	       return 'Array<any>'
	     }
	   }
	   const keys = Object.keys(data)
	   if (keys.length === 0) {
	     return 'object'
	   }
	   let a = Object.keys(data).map(v => {
	     const type = wx.getType(data[v])
	     return `${v}: ${type}`
	   }).join(',\n')
	   a = `{\n${a}\n}`
	   return a
	 } else {
	   return typeof data
	 }
	}

这样就可以直接在console下输出数据的type定义。

例子

给wx绑定好后，存储log的变量，得到temp1：

然后直接输入wx.getType(temp1)即可：

拷贝到vscode后，可以右键格式化一下。
再测试一个复杂的数组嵌套，发现也没有问题：