建设网上银行网站网站兼容工具

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
}