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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/411217.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java大数据hadoop2.9.2 Java编写Hadoop分析平均成绩

1、准备文件&#xff0c;例如score.txt&#xff0c;内容如下&#xff1a; zs k1 88 ls k1 98 ww k1 78 zs k2 88 ls k2 98 ww k2 78 zs k3 88 ls k3 98 ww k3 78 2、创建maven项目 <!-- https://mvnrepository.com/artifact/org.apache.hadoop/hadoop-common --><d…

第3章 计算机应用基础

文章目录 3.1 计算机概述3.2 计算机系统的组成3.2.1 计算机硬件3.2.2 计算机软件 3.3 计算机中数据的表示3.3.1 计算机中的二进制数据3.3.2 计算机中表示的数据 3.4 数据库系统3.4.1 基本概念3.4.2 数据库技术的发展3.4.3 数据库系统结构1、数据库系统的三级模式结构2、数据库系…

小程序 自定义组件和生命周期

文章目录 ⾃定义组件创建⾃定义组件声明组件编辑组件注册组件 声明引⼊⾃定义组件⻚⾯中使⽤⾃定义组件定义段与⽰例⽅法组件-⾃定义组件传参过程 小程序生命周期应用生命周期页面生命周期页面生命周期 ⾃定义组件 类似vue或者react中的自定义组件 ⼩程序允许我们使⽤⾃定义组件…

【汽车销售数据】2015~2023年各厂商各车型的探索 数据分析可视化

数据处理的思路&#xff1a; 1 各表使用情况&#xff1a; 汽车分厂商每月销售表&#xff0c;该表主要分析展示top10销量的厂商销量、占比变化情况&#xff08;柱形图、饼图&#xff09;&#xff1b;中国汽车分车型每月销售量表&#xff0c;该表主要分析展示top20销量的车型销…

web架构师编辑器内容-编辑器组件图层面板功能开发-锁定隐藏、键盘事件功能的开发

我们这一部分主要是对最右侧图层面板功能进行剖析&#xff0c;完成对应的功能的开发: 每个图层都对应编辑器上面的元素&#xff0c;有多少个元素就对应多少个图层&#xff0c;主要的功能如下&#xff1a; 锁定功能&#xff1a;点击锁定&#xff0c;在编辑器中没法编辑对应的组…

CNN:Convolutional Neural Network(上)

目录 1 为什么使用 CNN 处理图像 2 CNN 的整体结构 2.1 Convolution 2.2 Colorful image 3 Convolution v.s. Fully Connected 4 Max Pooling 5 Flatten 6 CNN in Keras 原视频&#xff1a;李宏毅 2020&#xff1a;Convolutional Neural Network 1 为什么使用…

基于LabVIEW的压力传感器测试系统

摘要 现在各类压力传感器已广泛应用于各种工业自控环境&#xff0c;对压力传感器的研究 及应用&#xff0c;既可以体现一个国家的科技发展水平&#xff0c;又可以提升国家的综合国力&#xff0c;还 可以在丰富、方便和智能化人们的生活方面做出重要的贡献。而针对不同仪器组 成…

Docker篇之修改docker默认磁盘占用目录

一、前言 通常情况下&#xff0c;当我们默认安装docker服务时&#xff0c;在不指定默认存储路径时&#xff0c;docker会自动创建目录&#xff0c;经常会出现打满根目录的情况。 默认存储路径为&#xff1a;/var/lib/docker 下 可通过如下进行查询&#xff1a; docker info输出…

【目标检测】YOLOv5算法实现(九):模型预测

本系列文章记录本人硕士阶段YOLO系列目标检测算法自学及其代码实现的过程。其中算法具体实现借鉴于ultralytics YOLO源码Github&#xff0c;删减了源码中部分内容&#xff0c;满足个人科研需求。   本系列文章主要以YOLOv5为例完成算法的实现&#xff0c;后续修改、增加相关模…

安全牧场,保障优质奶源 追溯羊奶品质

安全牧场&#xff0c;保障优质奶源 追溯羊奶品质 近年来&#xff0c;人们对食品安全和健康越来越关注&#xff0c;而安全牧场的兴起正能够满足人们对优质奶源的需求。安全牧场以严格的品质监控和科学的管理&#xff0c;为消费者提供可追溯的高品质羊奶产品。本文小编羊大师将为…

蓝桥杯备赛 day 2 —— 二分算法(C/C++,零基础,配图)

目录 &#x1f308;前言&#xff1a; &#x1f4c1; 二分的概念 &#x1f4c1; 整数二分 &#x1f4c1; 二分的模板 &#x1f4c1; 习题 &#x1f4c1; 总结 &#x1f308;前言&#xff1a; 这篇文章主要是准备蓝桥杯竞赛同学所写&#xff0c;为你更好准备蓝桥杯比赛涉及…

Jmeter 测试脚本录制器-HTTP 代理服务器

Jmeter 测试脚本录制器-HTTP 代理服务器 Jmeter 配置代理服务器代理服务器获取请求地址示例图配置步骤 浏览器配置代理Google 浏览器插件配置代理windows 本地网络配置代理 启动录制&#xff0c;生成证书生成证书导入证书Jmeter 配置证书 浏览器点击页面&#xff0c;录制请求地…