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

news2024/11/17 20:49:04

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.coloradmin.cn/o/1390360.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

检索增强生成技术(RAG)深度优化指南:原理、挑战、措施、展望

ChatGPT、Midjourney等生成式人工智能&#xff08;GenAI&#xff09;在文本生成、文本到图像生成等任务中表现出令人印象深刻的性能。然而&#xff0c;生成模型也不能避免其固有的局限性&#xff0c;包括产生幻觉的倾向&#xff0c;在数学能力弱&#xff0c;而且缺乏可解释性。…

C++基础算法之贪心

临渊羡鱼 不如退而结网 &#x1f3a5;烟雨长虹&#xff0c;孤鹜齐飞的个人主页 &#x1f525;个人专栏 寒假带大家手撕算法 期待小伙伴们的支持与关注&#xff01;&#xff01;&#xff01; 目录 贪心算法的简介 贪心算法的介绍# 贪心的基本原理# 贪心的局限性# 贪心的特征# 贪…

用julia演示蝴蝶效应:洛伦兹吸引子

文章目录 Lorentz吸引子julia绘图关闭抗锯齿 蝴蝶效应的名字来源于蝴蝶扇动翅膀的动作&#xff0c;虽然这个动作微小&#xff0c;但可能会在数周后引起飓风等极端天气的发生。这种现象表明&#xff0c;微小的变化可能会被放大并产生非线性的结果。这个概念最早由美国气象学家爱…

【开源】基于JAVA的康复中心管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员模块 三、系统展示四、核心代码4.1 查询康复护理4.2 新增康复训练4.3 查询房间4.4 查询来访4.5 新增用药 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的康复中…

C++中map按照从大到小的顺序存储元素

map按照从大到小存储元素 引言map的大致介绍概述 场景误区示例示例代码&#xff08;方法一&#xff09;运行结果示例代码二&#xff08;方法二&#xff09;运行结果 引言 在对map的使用中&#xff0c;由于对业务的需要&#xff0c;希望map中存储元素能够按照键的大小从大到小的…

【EI会议征稿通知】2024年第三届能源互联网及能源交互技术国际会议(EIEIT 2024)

2024年第三届能源互联网及能源交互技术国际会议(EIEIT 2024) 2024 3rd International Conference on the Energy Internet and Energy Interactive Technology 随着EIEIT前2届的成功举办&#xff0c;我们很荣幸地宣布&#xff0c;2024年第三届能源互联网及能源交互技术国际学术…

牛客周赛 Round 6 解题报告 | 珂学家 | 数学场

前言 一切都是命运的安排。 整体评价 这场整体感觉有点简单&#xff0c;D题感觉不错&#xff0c;E题应该是超纲了。整场还是偏数学&#xff0c;个人还是喜欢Round 4/Round 5. A. 游游的数字圈 简单模拟题 0,6,9对应一个圆圈8对应2个圆圈 import java.io.BufferedInputStrea…

spring-boot集成mybait-plus+shareding实现分表分库,dynamic动态数据多数据源

spring-boot集成mybait-plusshareding实现分表分库&#xff0c;多数据源 1. Spring-boot集成shareding Mybatis-plus依赖引用yaml 配置示例 2. 引用 dynamic实现分表动态数据源依赖引用yaml配置数据源注入配置示例 说明&#xff1a; 以下内容为两部分&#xff1a; …

黑马苍穹外卖学习Day7

文章目录 缓存菜品实现思路代码开发 缓存套餐Spring Cache入门案例实现思路代码开发 添加购物车需求分析和设计代码开发 查看购物车需求分析代码开发 清空购物车需求分析代码实现 缓存菜品 实现思路 代码开发 Controller层 RestController("userDishController") …

C# new Thread和Task.Run,多线程(Thread和Task)

一、开启多线程-new Thread的使用 示例一 Thread thread25yi new Thread(new ThreadStart(obj.MethodTimer1)); thread25yi.Start(); void MethodTimer1() { while (true) { Console.WriteLine(DateTime.Now.ToString() "_" thread25yi.CurrentThread.Managed…

Github搭建图床 github搭建静态资源库 免费CDN加速 github搭建图床使用 jsdelivr CDN免费加速访问

Github搭建图床 github搭建静态资源库 免费CDN加速 github搭建图床使用 jsdelivr CDN免费加速访问 前言1、创建仓库2、开启 gh-pages页面功能3、访问测试 前言 写博客文章时&#xff0c;图片的上传和存放是一个问题&#xff0c;使用小众第三方图床&#xff0c;怕不稳定和倒闭&…

【SpringMVC】常用注解(续)

在SpringMVC常用注解一文中&#xff0c;已经对一些基本注解&#xff08;有Controller、RequestMapping、ResponseBody、RequestParam&#xff09;进行了简单介绍&#xff1b;在此篇文章中&#xff0c;将继续对剩余的几个常用注解进行简单介绍&#xff0c;有RequestBody、PathVa…

测试平台出问题?看我20分钟快速定位!

今天遇到一个问题&#xff0c;感觉挺有意思&#xff0c;处理过程也非常有意义&#xff0c;希望能给大家一个借鉴吧。今天一位小姐姐找到了我们大组长&#xff0c;说测试平台添加自动化测试用例失败&#xff0c;之后我们组长把我拉到了一个群里让我去看一下&#xff0c;硬着头皮…

uniapp 简易自定义日历

1、组件代码 gy-calendar-self.vue <template><view class"calendar"><view class"selsct-date">请选择预约日期</view><!-- 日历头部&#xff0c;显示星期 --><view class"weekdays"><view v-for"…

k8s存储卷-动态PV

pv和PVC&#xff0c;存储卷&#xff1a; 存储卷&#xff1a; EmptyDir&#xff1a;容器内部&#xff0c;随着pod销毁&#xff0c;emptyDir也会消失&#xff0c;不能做数据持久化 HostPath&#xff1a;持久化存储数据&#xff0c;可以和节点上目录做挂载&#xff0c;pod被销毁…

vue el-table 多选框回填

主要代码: //选中列&#xff0c;所有列&#xff0c;表名toggleSelection(selectRows, totalRows, tablename) {this.$refs.table.clearSelection();if (selectRows.length > 0) {this.$nextTick(() > {selectRows.forEach(item > {totalRows.forEach(item1 > {if (…

PyTorch常用操作

0. 先决条件 安装驱动、CUDA、cuDNN&#xff0c;请参考&#xff1a;https://blog.csdn.net/liugan528/article/details/128974129 import torch print(torch.__version__)#查看gpu是否可用 print(torch.cuda.is_available())#查看设备gpu个数 print(torch.cuda.device_count(…

数据结构学习 jz29 顺时针打印矩阵

关键词&#xff1a;模拟 题目&#xff1a;螺旋遍历二维数组 简单题做了超过40分钟 调了很久 不好 方法一&#xff1a; 我自己做的。 思路&#xff1a; xy_t&#xff1a; 记录xy的方向&#xff0c;往右走&#xff0c;往下走&#xff0c;往左走&#xff0c;往上走 t控制方…

Jupyter Notebook

2017年左右在大学里都听说过Jupyter Notebook&#xff0c;并且也安装用了一段时间&#xff0c;后来不知道什么原因没有用了。估计是那时候写代码的时候多一些&#xff0c;因为它可以直接写代码并运行结果&#xff0c;现在不怎么写代码了。 介绍 后缀名为.ipynb的json格式文件…