TS的接口 泛型 自定义类型

接口

新建一个ts文件，在里面定义一个接口

export interface PersonInter{
    id:string,
    name:string,
    age:number
}

在vue文件中引入这个ts文件

<script lang="ts" setup name="Person">

    import {type PersonInter} from '@/types'

    let person:PersonInter={id:'1',name:'张三',age:60}


</script>

泛型

定义一个数组，元素全是PersonInter类型

<script lang="ts" setup name="Person">

    import {type PersonInter} from '@/types'


    let personList:Array<PersonInter> = [
        {id:'1',name:'张一',age:61},
        {id:'2',name:'张二',age:62},
        {id:'3',name:'张三',age:63},
    ]

</script>

自定义类型

export interface PersonInter{
    id:string,
    name:string,
    age:number
}
//一下两种任选其一，自定义类型
export type Persons = Array<PersonInter>
export type Persons = PersonInter[]

在vue组件中引入自定义类型，并定义一个该类型的响应式数据

<script lang="ts" setup name="Person">
    import {reactive} from 'vue'
    import {type Persons} from '@/types'

    let personList = reactive<Persons>([
        {id:'1',name:'张一',age:61},
        {id:'2',name:'张二',age:62},
        {id:'3',name:'张三',age:63},
    ])
</script>

在接口中定义一个非必须的属性

export interface PersonInter{
    id:string,
    name:string,
    age:number,
    x?:string
}