​​​​Typescript 接口 和继承 数组处理

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

[
{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;