JSON to TS 扩展插件的使用

作用场景

作用是快速转化React+TS的Axios拿回数据的类型约束定义

步骤一.获取数据

当页面中发起请求成功,获取到接口所携带的数据时,

const HomeData = async () => {
        let res = await HomeApi()
        let data = res.data as IFastData
    }

• 此时通过 data 对象来接收 res.data

• as IFastData 意为限定接收数据的类型约束,是个自定义的名称

步骤二:通过Log复制所有数据

let data = res.data as IFastData
console.log(data)

• 此时我们会获取到很多很多的数据,其中会包括数组,对象,字符串,布尔值等等非常多的类型

console.log(data)的预览

collect: 20
exam: {id: 1, pid: null, businessLevel: null, numberLevel: 1, title: 'Java面试题', …}
exemItems: (1) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, ]
study: 24
wrong: 105

可以看到data里还有数组和对象,如果进行手动的类型约束显得格外的困难,此时就需要借助到插件来进行快速转换了

步骤三:复制数据进行转化

1. 创建一个VScode的临时空文件(不需要保存)

2. 将刚刚data中的数据全部复制进去

3. 插件提供了两种方法:

   1	从剪贴板转换	（Shift+Ctrl+Alt+V）
   2	从所选内容转换	（Shift+Ctrl+Alt+S）

4. 一般选取第二种方式:进行转换后会生成一个转化后的TS文件

步骤四:将转换好的类型文件放到页面中

引入类型约束文件有两种方式:

一:本文件形式

此种方式就是十分简单的将定义的词条直接丢在 本页面的最末尾

export default function index({ }: Props) {
    //当需要一个响应式数据的的数组时也可以采取这样的定义方式
    const [dataArray, setdataArray] =useState<Array<IFastRecord>>()
    const GETFastDataAction = async () => {
        let res = await GETFastDataApi()
        //此时使用文件定义类型  as IFastData
        let data = res.data as IFastData
    }
​
    useEffect(() => {
        GETFastDataAction()
    }, [])
​
    return (
        <div>
           .......
        </div >
)}
​
interface IFastData {
    //可以看到  IFastRecord 此时是下一个接口的名称,就意为着可以进行嵌套定义
    records: IFastRecord[];
    total: number;
    size: number;
    orders: any[];
    hitCount: boolean;
}
​
interface IFastRecord {
    id: number;
    pid?: any;
    title: string;
    info: string;
    actionCode: string;
    actionType: string;
    actionName: string;
}

二:引入配置文件形式

引入

就是将上方的定义名进行封装打包到指定的文件夹后在进行引入

//引入接口
import { IFastRecord,IFastData } from "../../until/index"
 
...
 const [dataArray, setdataArray] =useState<Array<IFastRecord>>()
    const GETFastDataAction = async () => {
        let res = await GETFastDataApi()
        //此时使用文件定义类型  as IFastData
        let data = res.data as IFastData
    }

导出

而在接口文件夹中我们也需要进行接口的导出

../../until/index

//定义fast返回的数据类型
export interface FastDatastate {
    actionCode: string,
    actionName: string,
    actionType: string,
    ......
}
​
//定义home返回的数据类型
export interface HomeDatastate {
    collect: string,
    study: string,
    wrong: string,
    .....     
}