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

news/2024/7/27 8:44:35/文章来源:https://blog.csdn.net/qq_42371932/article/details/135495658

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.luyixian.cn/news_show_925462.aspx

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

相关文章

【目标跟踪】跨相机如何匹配像素

文章目录 前言一、计算思路二、代码三、结果 前言 本本篇博客介绍一种非常简单粗暴的方法&#xff0c;做到跨相机像素匹配。已知各相机内外参&#xff0c;计算共视区域像素投影&#xff08;不需要计算图像特征&#xff09;。废话不多说&#xff0c;直接来&#xff0c;见下图。…

C#--核心

CSharp核心知识点学习 学习内容有&#xff1a; 绪论&#xff1a;面向对象的概念 Lesson1&#xff1a;类和对象 练习&#xff1a; Lesson2&#xff1a;封装--成员变量和访问修饰符 练习: Lesson3:封装--成员方法 Lesson4&#xff1a;封装--构造函数和析构函数 知识点四 垃圾回收…

git主分支合并到本地分支起冲突的解决办法

1.原因&#xff1a;一个项目几个人共同承担&#xff0c;难免有交叉的部分&#xff0c;这个时候交叉部分的提交就会导致冲突 2.方法&#xff1a;点开该类手动进行更改&#xff1a; 一般会有两种情况&#xff1a;一个是更改&#xff0c;一个是冲突(IDEA右上角会显示)&#xff1b;…

meter报OOM错误,如何解决?

根据在之前的压测过程碰到的问题&#xff0c;今天稍微总结总结&#xff0c;以后方便自己查找。 一、单台Mac进行压测时候&#xff0c;压测客户端Jmeter启动超过2000个线程&#xff0c;Jmeter报OOM错误&#xff0c;如何解决&#xff1f; 解答&#xff1a;单台Mac配置内存为8G&…

详解java中ArrayList

目录 前言 一、ArrayList是什么 二、ArrayList使用 1、ArrayList的构造 2 、ArrayList常见操作 3、 ArrayList的遍历 4、 ArrayList的扩容机制 三、来个练习 前言 当你看到这篇文章我觉得很好笑&#xff0c;因为我开始也不懂ArrayList现在轮到你了&#xff0c;嘻嘻嘻&am…

GRE隧道(初级VPN)配置步骤

一、拓朴图&#xff1a; 要求&#xff1a;1、PC1 和 PC2 能访问充当互联网接口地址的ISP环回口地址8.8.8.8 2、PC1 和 PC2 走GRE隧道互通 二、配置步骤&#xff1a; 1、配置IP 2、R1、R2 配置nat&#xff0c;代理内网地址通过G0/0/0口上外网 acl 2000rule permit source a…

Nginx配置负载均衡实例

Nginx配置反向代理实例二 提醒一下&#xff1a;下面实例讲解是在Mac系统演示的&#xff1b; 负载均衡实例实现的效果 浏览器地址栏输入地址http://192.168.0.101/test/a.html&#xff0c;刷新页面进行多次请求&#xff0c;负载均衡效果&#xff0c;平均分配到8080端口服务和8…

iOS解决内存泄漏工具

在iOS应用中&#xff0c;有一些工具和技术可以帮助识别和解决内存泄漏问题。以下是一些常用的工具&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.Instruments&#xff1a; Instruments 是Xcode中…

分布式搜索引擎--认识

elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 。 elasticsearch结合kibana、Logstash、Beats&#xff0c;也就是elastic stack&#xff08;ELK&#xff09;。被广泛…

行为型设计模式——备忘录模式

备忘录模式 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以方便地回到一个特定的历史步骤&#xff0c;当新的状态无效或者存在问题时&#xff0c;可以使用暂时存储起来的备忘录将状态复原&#xff0c;很多软件都提供了撤销&#xff08;Undo&#xff09;操作…

使用mamba替换conda和anaconda配置环境安装软件

使用mamba替换miniconda和anaconda&#xff0c;原因是速度更快&#xff0c;无论是创建新环境还是激活环境 conda、mamba、anaconda都是蟒蛇的意思… 下载mambaforge wget https://github.com/conda-forge/miniforge/releases/latest/download/Mambaforge-Linux-x86_64.sh ba…

基于Matlab/Simulink开发自动驾驶的解决方案

文章目录 处理自动驾驶数据 仿真自动驾驶场景 设计感知算法 设计规划和控制算法 生成代码和部署算法 集成和测试 参考文献 使用 MATLAB/Simulink开发自动驾驶&#xff0c;能够深入建模真实世界的行为、减少车辆测试并验证嵌入式软件的功能&#xff0c;从而推进自动驾驶感…

Mybatis 常用条件语句,大于小于、if、for、模糊搜索、case when、choose

大于小于 方法1&#xff1a; > 大于 &#xff0c; < 小于 <if test"startTime ! null ">and a.create_time > #{startTime} </if> <if test"endTime ! null ">and a.create_time < #{endTime} </if> 方法2(建议写这…

java每日一题——ATM系统编写(答案及编程思路)

前言&#xff1a; 基础语句学完&#xff0c;也可以编写一些像样的程序了&#xff0c;现在要做的是多加练习&#xff0c;巩固下知识点&#xff0c;打好基础&#xff0c;daydayup! 题目&#xff1a;模仿银行ATM系统&#xff0c;可以创建用户&#xff0c;存钱&#xff0c;转账&…

一、MySQL 卸载

目录 1、软件的卸载准备 2、软件的卸载 方式一&#xff1a;通过控制面板卸载 方式二&#xff1a;通过mysql8的安装向导卸载 1、双击mysql8的安装向导 2、取消更新 3、选择要卸载的mysql服务器软件的具体版本 4、确认删除数据目录 5、执行删除 6、完成删除 3、清理残…

半小时实现GPT纯血鸿蒙版

仅需半小时&#xff0c;即可实现纯血鸿蒙版本的ChatGPT&#xff01; 废话少说&#xff0c;先看效果图&#xff1a; 如上图所示&#xff0c;这个小Demo实现了AI智能问答。靠右加粗的文本是用户点击底部提交按钮后出现的&#xff1b;后面靠左对齐的普通文本是来自AI的回答内容。当…

鸿蒙(HarmonyOS)应用开发指南

1. 概述 1.1 简介 鸿蒙&#xff08;即 HarmonyOS &#xff0c;开发代号 Ark&#xff0c;正式名称为华为终端鸿蒙智能设备操作系统软件&#xff09;是华为公司自 2012 年以来开发的一款可支持鸿蒙原生应用和兼容 AOSP 应用的分布式操作系统。该系统利用“分布式”技术将手机、电…

第十七周周报

文章目录 摘要目标检测锚框交并比NMS 非极大值抑制输出 文献阅读&#xff1a;SMPL: A Skinned Multi-Person Linear ModelIntroductionRelated WorkModel FormulationTraining评估动态SMPL讨论结论 总结 摘要 本周看了三维人体重建的领域&#xff0c;看了一篇SMPL的文章&#…

【sqlite3】sqlite3在linux下使用sqlitebrowser工具实现数据可视化

sqlite3在linux下使用sqlitebrowser工具实现数据可视化 1. ### install sqlitebrowser 1. ### install sqlitebrowser 安装指令 sudo apt-get install sqlitebrowser通过工具打开数据库 sqlitebrowser stereo.db打开效果

【蓝桥杯日记】第一篇——如何搭建系统环境

目录 前言 环境相关文件 学生机环境-Web应用开发环境&#xff08;第十五届大赛&#xff09; 学生机环境-Java编程环境&#xff08;第十五届大赛&#xff09; 学生机环境-C/C编程环境&#xff08;第十五届大赛&#xff09; 学生机环境-Python编程环境 &#xff08;第十五届…