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

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

ccd897d3a08c420395b3ac9de197d5e5.png

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

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

export type Persons = Array<PersonInter>

export type Persons = PersonInter[]

b1f5e3fb360542a8b9edb3df66e097a3.png

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

首先需要加上 type 前缀

其次引入了必须使用!

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

0f04bb12843140da901c7c636e651724.png

4如何结合reactive和泛型

有2种写法

第一种

82f044f4e7634510a6a56f8dc091124f.png

第二种

dab8d438b92c4267aa180191171d6ed8.png

5defineProps和泛型结合使用

<Person a="哈哈” :list="personList"/>  //父亲传给儿子list数据

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

a8fec16a59ee4bd49c887f1202c3cc02.png

b815d87a5224484b856249d38963e75f.png

 

相关推荐

  1. TS类型

    2024-01-17 05:28:02       13 阅读
  2. vue3+ts定义插件

    2024-01-17 05:28:02       35 阅读
  3. ts接口概念

    2024-01-17 05:28:02       14 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-17 05:28:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-17 05:28:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-17 05:28:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-17 05:28:02       20 阅读

热门阅读

  1. C++ 类、结构体

    2024-01-17 05:28:02       29 阅读
  2. 文件包含介绍

    2024-01-17 05:28:02       28 阅读
  3. Nginx解析域名到指定端口

    2024-01-17 05:28:02       28 阅读
  4. 24校招,得物测试开发工程师一面

    2024-01-17 05:28:02       33 阅读
  5. sklearn快速实现python机器学习算法

    2024-01-17 05:28:02       27 阅读
  6. TCP服务器和客户端的创建步骤

    2024-01-17 05:28:02       32 阅读
  7. 1.1 面试经典 150 题-合并两个有序数组

    2024-01-17 05:28:02       33 阅读
  8. 设计模式——组合模式

    2024-01-17 05:28:02       27 阅读