Vue3 ts环境下的PropType

 简介

      在Typscript中,我们可以使用PropType进行类型的推断与验证。在日常的开发中我们常常会遇到下面这样的场景:

        我们通过request请求从服务端获取了一条数据,数据是个Array的格式,Array中的每个元素又是一个对象,像下面这样的数据

const intro = [{title: "标题一",description: "描述一",totalNum: 1},{title: "标题二",description: "描述二",totalNum: 2},{title: "标题三",description: "描述三",totalNum: 3},
]

        此时我们如果封装几个方法在ts文件中,用于处理这样的服务端数据,在传参的过程中,我们可能用一个Array类型去接这个intro数组,但可能项目多人开发,别人在使用这个数组时就不了解这个Array中具体每个元素是什么类型,此时我们使用PropType。

使用

        一个小栗子,在非setup语法糖的环境中使用PropType

export interface CompProps {title: string;description: string;totalNum: number;
}
<template><div class="backbox"><div class="introbox"><div v-for="item in intro"><div class="intro">title = {{ item.title }}</div><div class="intro">description = {{ item.description }}</div><div class="intro">totalNum = {{ item.totalNum }}</div></div></div></div>
</template>
<script lang="ts">
import { PropType, defineComponent } from "vue";
import { CompProps } from './prop';export default defineComponent({name: "Comp",props: {intro: {type: Array as PropType<CompProps[]>,required: true},}
})
</script>
<style lang="less" scoped>
.introbox {background-color: antiquewhite;padding: 20px;.intro {display: inline-block;padding: 20px;margin: 10px;background-color: silver;}
}
</style>
<template><div><h2>PropType属性的类型验证</h2><div><Comp :intro="intro"></Comp></div></div>
</template>
<script setup lang="ts">
import Comp from './component/index.vue';const intro = [{title: "标题一",description: "描述一",totalNum: 1},{title: "标题二",description: "描述二",totalNum: 2},{title: "标题三",description: "描述三",totalNum: 3},
]
</script>
<style></style>

        当我们在上边这段代码的文件中,使用鼠标停在Comp元素上时,此时vscode给出的提示是下面这张图里的样子 :

        可以看到intro不是个Array类型,而是PropType<CompProps[]>类型。 

一个小栗子,在setup语法糖中使用PropType

export interface CompNum {num: number;id: number;
}
<template><div class="backbox"><div class="btnbox" v-for="num in numbs"><div class="btn" :id="String(num.id)" @click="buttonEvent($event)">{{ num.num }}</div></div></div>
</template>
<script setup lang="ts">
import { PropType, ref } from 'vue';
import { CompNum } from './prop';const props = defineProps({nums: {type: Array as PropType<CompNum[]>,default: []}
});
const emits = defineEmits(['update:nums']);
const numbs = ref(props.nums);
const buttonEvent = (event: any) => {let index = event.target.id;let arr = numbs.value;arr[index].num++;numbs.value = arr;emits('update:nums', numbs);
}
</script>
<style scoped lang="less">
.btnbox {display: flex;flex-direction: row;background-color: cadetblue;
}
.btn{display: inline-block;padding: 25px 40px 25px 40px;margin: 10px 40px 10px 20px;background-color: aquamarine;text-align: center;
}</style>
<template><div><h2>PropType属性的类型验证</h2><div><Btns v-model:nums="numsRef"></Btns></div></div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import Btns from './component/button.vue';const intro = [{title: "标题一",description: "描述一",totalNum: 1},{title: "标题二",description: "描述二",totalNum: 2},{title: "标题三",description: "描述三",totalNum: 3},
]
let one = { num: intro[0].totalNum, id: 0 };
let two = { num: intro[1].totalNum, id: 1 };
let three = { num: intro[2].totalNum, id: 2};
const nums = [one, two, three];
const numsRef = ref(nums);watch(() => numsRef.value,(value) => {console.log("newValue = ", value);},{deep: true}
);</script>
<style></style>

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

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

相关文章

Web前端—属性描述符

属性描述符 假设有一个对象obj var obj {a:1 }观察这个对象&#xff0c;我们如何来描述属性a&#xff1a; 值为1可以重写可以遍历 我们可以通过Object.getOwnPropertyDescriptor得到它的属性描述符 var desc Object.getOwnPropertyDescriptor(obj, a); console.log(desc);我…

Python-VBA函数之旅-bytearray函数

目录 1、bytearray函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、相关文章&#xff1a; 个人主页&#xff1a;非风V非雨-CSDN博客 bytearray函数在Python中提供了一种可变字节序列的表示方式&#xff0c;这在实际编程中有多种应用场景。常见的应用场…

RabbitMQ3.13.x之九_Docker中安装RabbitMQ

RabbitMQ3.13.x之_Docker中安装RabbitMQ 文章目录 RabbitMQ3.13.x之_Docker中安装RabbitMQ1. 官网2. 安装1 .拉取镜像2. 运行容器 3. 访问 1. 官网 rabbitmq - Official Image | Docker Hub 2. 安装 1 .拉取镜像 docker pull rabbitmq:3.13.0-management2. 运行容器 # lates…

蓝桥杯-数组分割

问题描述 小蓝有一个长度为 N 的数组 A 「Ao,A1,…,A~-1]。现在小蓝想要从 A 对应的数组下标所构成的集合I 0,1,2,… N-1 中找出一个子集 民1&#xff0c;那么 民」在I中的补集为Rz。记S∑reR 4&#xff0c;S2∑rERA,&#xff0c;我们要求S、和 S,均为偶数&#xff0c;请问在这…

Spring6-单元测试:JUnit

1. 概念 在进行单元测试时&#xff0c;特别是针对使用了Spring框架的应用程序&#xff0c;我们通常需要与Spring容器交互以获取被测试对象及其依赖。传统做法是在每个测试方法中手动创建Spring容器并从中获取所需的Bean。以下面的两行常见代码为例&#xff1a; ApplicationCo…

【教程】混淆Dart 代码

什么是代码混淆&#xff1f; 代码混淆是一种将应用程序二进制文件转换为功能上等价&#xff0c;但人类难于阅读和理解的行为。在编译 Dart 代码时&#xff0c;混淆会隐藏函数和类的名称&#xff0c;并用其他符号替代每个符号&#xff0c;从而使攻击者难以进行逆向工程。 Flut…

基于SpringBoot的“垃圾分类网站”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“垃圾分类网站”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 系统功能界面图 用户登录、用户注…

SpirngBoot开发常用知识

springboot开发常用知识 命令行打包SpringBoot打包插件window端口命令临时属性设置热部署启动热部署热部署范围 常用计量单位数据校验加载测试的专用属性Web环境模拟测试如何发送虚拟请求业务层测试回滚随机产生测试用例内置数据源 命令行打包 对SpringBoot项目进行打包命令行…

适用于 Windows 10 的 10 大免费数据恢复软件

数据丢失可能是一场噩梦&#xff0c;尤其是在涉及重要文件和文档时。无论是由于意外删除、系统崩溃还是病毒攻击&#xff0c;找到适合 Windows 10 的文件夹恢复软件都可以在恢复丢失的数据方面发挥重要作用。在本指南中&#xff0c;我们将探索适用于 Windows 10 用户的 10 大免…

[STL-list]介绍、与vector的对比、模拟实现的迭代器问题

一、list使用介绍 list的底层是带头双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前一个元素和后一个元素。与其他的序列式容器相比(array&#xff0c;vector&#xff0c;deque)&#xff0c;list通常在任意位置进行…

[Apple Vision Pro]开源项目 Beautiful Things App Template

1. 技术框架概述&#xff1a; - Beautiful Things App Template是一个为visionOS设计的免费开源软件&#xff08;FOSS&#xff09;&#xff0c;用于展示3D模型画廊。 2. 定位&#xff1a; - 该模板作为Beautiful Things网站的延伸&#xff0c;旨在为Apple Vision Pro用户…

CNAS软件测试公司有什么好处?如何选择靠谱的软件测试公司?

CNAS认可是中国合格评定国家认可委员会的英文缩写&#xff0c;由国家认证认可监督管理委员会批准设立并授权的国家认可机构&#xff0c;统一负责对认证机构、实验室和检验机构等相关机构的认可工作。 在软件测试行业&#xff0c;CNAS认可具有重要意义。它标志着一个软件测试公…

C# 如何修改项目名称

目录 背景具体步骤1、Visual Studio中修改项目名和程序集名称以及命名空间2、修改项目文件夹名3、修改解决方案里项目的路径4、再次打开解决方案&#xff0c;问题解决步骤总结 名词解释解决方案&#xff08;Solution&#xff09;项目&#xff08;Project&#xff09;程序集&…

浏览器工作原理与实践--虚拟DOM:虚拟DOM和实际的DOM有何不同

虚拟DOM是最近非常火的技术&#xff0c;两大著名前端框架React和Vue都使用了虚拟DOM&#xff0c;所以我觉得非常有必要结合浏览器的工作机制对虚拟DOM进行一次分析。当然了&#xff0c;React和Vue框架本身所蕴含的知识点非常多&#xff0c;而且也不是我们专栏的重点&#xff0c…

JavaWeb前端基础(HTML CSS JavaScript)

本文用于检验学习效果&#xff0c;忘记知识就去文末的链接复习 1. HTML 1.1 HTML基础 结构 头<head>身体<body> 内容 图片<img>段落<p>图标<link> 标签 单标签双标签 常用标签 div&#xff1a;分割块span&#xff1a;只占需要的大小p&…

sqlserver问题记录

今天在利用sql查询数据时出现如下错误 在执行批处理时出现错误。错误消息为: 引发类型为“System.OutOfMemoryException”的异常。 症状 使用 SSMS 运行返回大量数据的 SQL 查询时&#xff0c;会收到类似于以下内容的错误消息&#xff1a; 执行批处理时出错。 错误消息为&…

nginx工作原理解析

目录 1、master-workers 的工作机制介绍 2、master-workers 的机制的好处 3、设置多少个 worker 4、最大连接数和支持的最大并发数的计算 1、master-workers 的工作机制介绍 nginx在启动后&#xff0c;会有一个master进程和一个或者多个相互独立的worker进程 过来的请求由…

C++模仿qq界面

#include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//设置窗口的大小this->resize(645,497);//设置窗口名字this->setWindowTitle("QQ");//设置窗口图标this->setWindowIcon(QIcon("C:\\zhouzhouMyfile\\qt_proj…

Linux网络编程: TCP协议之SACK与D-SACK详解

一、参考RFC https://www.ietf.org/rfc/rfc2018 https://www.ietf.org/rfc/rfc2883.txt 二、SACK选项&#xff08;RFC2018&#xff09; SACK实现的需要发送方和接收方协作。为此&#xff0c;TCP首部实际上定义了两种选项&#xff1a;SACK允许选项、SACK选项。 SACK允许选项…

突破校园网限速:使用 iKuai 多拨分流负载均衡 + Clash 代理(内网带宽限制通用)

文章目录 1. 简介2. iKuai 部署2.1 安装 VMware2.2 安装 iKuai(1) 下载固件(2) 安装 iKuai 虚拟机(3) 配置 iKuai 虚拟机(4) 配置 iKuai(5) 配置多拨分流 2.3 测试速度 3. Clash 部署(1) 配置磁盘分区(2) 安装 Docker(3) 安装 Clash(4) 设置代理 4. 热点&#xff1a;一起瓜分互…