Vue3-TS中的接口-泛型-自定义类型

1首先一般在src下新建types文件夹,用来存放接口类型

Vue3-TS中的接口-泛型-自定义类型_第1张图片

2定义一个接口,用于限制person对象的具体属性

当需要用这个类型形成数组时,有2种写法

export type Persons = Array

export type Persons = PersonInter[]

Vue3-TS中的接口-泛型-自定义类型_第2张图片

3在文件中使用接口,需要先引入

首先需要加上 type 前缀

其次引入了必须使用!

然后在定义的变量后用:type的形式,申明接口

Vue3-TS中的接口-泛型-自定义类型_第3张图片

4如何结合reactive和泛型

有2种写法

第一种

Vue3-TS中的接口-泛型-自定义类型_第4张图片

第二种

Vue3-TS中的接口-泛型-自定义类型_第5张图片

5defineProps和泛型结合使用

  //父亲传给儿子list数据

defineProps<{list:Persons}>()   //儿子接受数据的时候,用泛型加以限制,表示我接受的名为list的数据只接受Persons类型

Vue3-TS中的接口-泛型-自定义类型_第6张图片

Vue3-TS中的接口-泛型-自定义类型_第7张图片

 

你可能感兴趣的:(vue.js,前端,javascript)