Typescript 接口 和继承 数组处理

ts的基础数据类型，可用来处理一般数据，但是碰到后台传入的复杂对象数组的时候，我们可以使用ts中的接口来定义处理

例如：从后端接口中获取到数据：

[
{name:'小明',age:13,sex:1,id:1,remake:'这个是小明'},
{name:'小红',age:15,sex:2,id:2,remake:null},
{name:'大明',age:53,sex:1,id:3,remake:null},
]

此时一般的数据类型已经无法满足,我们就可以定义一个接口来接收此数据

    interface personArr {
            name: string,
            age: number,
            sex: number,
            id: number,
            remark: string | null,
        }

ps:当返回值中可能为空或者有不同类型的值时 我们可以使用｜来定义不同的类型.

此时再使用变量接收即可:

const a:personArr[]=res.data;

当其中数据为树形数据或者多维数组时，可使用如下接口

    interface personArrs {
            name: string,
            age: number,
            sex: number,
            id: number,
            remark: string | null,
            children?:personArr[]
        }

使用？来判断是否含有此下层数组

const a:personArrs[]=res.data;

如有两个基本相同数组，可使用接口的继承。
如上personArrs接口也可以写作

    interface personArrs extends personArr {
        //相同数据直接继承personArr接口
            children?:personArr[]
        }

如需继承多个接口 可使用，分割

    interface personArrs extends personArra,personArrb,personArrc{
        //继承多个接口
            newKey:string
        }

以上就是接口基本的使用方法，当我们使用vue3的reactive的时候 可以写作

 const person = reactive<{
            persona: personArrs[],
            personb: personArr[],
        }>({
            persona: [],
            personb: [],
        })

赋值的话可直接使用,页面即刷新

person.persona=res.data;