Vue 3 中的 TypeScript:接口、自定义类型与泛型
在 Vue 3 中,TypeScript 提供了强大的类型系统,帮助我们更好地管理代码的类型安全。通过使用 接口(Interface)、自定义类型(Type Aliases) 和 泛型(Generics),我们可以编写更清晰、更健壮的代码。本文将详细介绍这些概念,并通过优化后的代码示例来演示它们的实际应用。
1. 接口(Interface)
接口是 TypeScript 中定义对象结构的主要方式。它描述了对象的形状,包括属性的名称和类型。
1.1 定义接口
export interface Person {id: string;name: string;age: number;
}
Person
接口:- 定义了一个包含
id
、name
和age
属性的对象结构。 - 每个属性都有明确的类型。
- 定义了一个包含
1.2 使用接口
let person: Person = { id: "1", name: "张三", age: 18 };
person
对象:- 必须符合
Person
接口的结构。 - 如果缺少某个属性或类型不匹配,TypeScript 会报错。
- 必须符合
2. 自定义类型(Type Aliases)
自定义类型允许我们为复杂的类型定义一个别名,使代码更具可读性。
2.1 定义自定义类型
// 使用 Array<Person> 或 Person[] 定义 Persons 类型
export type Persons = Person[];
Persons
类型:- 表示一个
Person
对象的数组。 - 可以使用
Array<Person>
或Person[]
两种写法。
- 表示一个
2.2 使用自定义类型
let personList: Persons = [{ id: "1", name: "张三", age: 18 },{ id: "2", name: "李四", age: 19 },{ id: "3", name: "王五", age: 20 },{ id: "4", name: "赵六", age: 21 },
];
personList
数组:- 必须是一个
Person
对象的数组。 - 每个元素都必须符合
Person
接口的结构。
- 必须是一个
3. 泛型(Generics)
泛型允许我们编写可重用的代码,适用于多种类型。它通过参数化类型来实现。
3.1 使用泛型定义数组
let personList2: Array<Person> = [{ id: "1", name: "张三", age: 18 },{ id: "2", name: "李四", age: 19 },{ id: "3", name: "王五", age: 20 },{ id: "4", name: "赵六", age: 21 },
];
Array<Person>
:- 表示一个
Person
对象的数组。 - 泛型
Array<T>
可以用于任何类型T
。
- 表示一个
3.2 泛型的优势
- 类型安全:确保数组中的每个元素都符合指定的类型。
- 代码复用:可以用于多种类型,而无需重复定义。
4. 优化后的代码示例
以下展示了如何在 Vue 3 中使用接口、自定义类型和泛型。
4.1 定义类型文件(types.ts
)
// 定义 Person 接口
export interface Person {id: string;name: string;age: number;
}// 定义 Persons 类型
export type Persons = Person[];
4.2 使用类型文件(Person.vue
)
<template><div><h1>人员信息</h1><ul><li v-for="p in personList" :key="p.id">{{ p.name }} - {{ p.age }} 岁</li></ul></div>
</template><script setup lang="ts">
import { type Person, type Persons } from "@/types";// 定义单个 Person 对象
let person: Person = { id: "1", name: "张三", age: 18 };// 定义 Person 数组(使用自定义类型)
let personList: Persons = [{ id: "1", name: "张三", age: 18 },{ id: "2", name: "李四", age: 19 },{ id: "3", name: "王五", age: 20 },{ id: "4", name: "赵六", age: 21 },
];// 定义 Person 数组(使用泛型)
let personList2: Array<Person> = [{ id: "1", name: "张三", age: 18 },{ id: "2", name: "李四", age: 19 },{ id: "3", name: "王五", age: 20 },{ id: "4", name: "赵六", age: 21 },
];console.log(person);
</script><style scoped>
ul {list-style-type: none;padding: 0;
}li {margin: 10px 0;font-size: 18px;
}
</style>
4.3 代码解析
-
类型定义:
- 在
types.ts
中定义了Person
接口和Persons
类型。 - 通过
import
引入类型并在组件中使用。
- 在
-
数据定义:
- 使用
Person
接口定义单个对象person
。 - 使用
Persons
类型和Array<Person>
泛型定义数组personList
和personList2
。
- 使用
-
模板渲染:
- 使用
v-for
遍历personList
并渲染人员信息。
- 使用
-
样式优化:
- 使用
scoped
样式确保样式只作用于当前组件。
- 使用
5. 总结
-
接口(Interface):
- 用于定义对象的结构,确保类型安全。
-
自定义类型(Type Aliases):
- 用于为复杂类型定义别名,提高代码可读性。
-
泛型(Generics):
- 用于编写可重用的代码,适用于多种类型。
通过本文的介绍和优化后的代码示例,希望你能更好地理解 Vue 3 中 TypeScript 的类型系统,并在实际项目中灵活运用接口、自定义类型和泛型来提升代码质量!
相关文章:
Vue 3 中的 TypeScript:接口、自定义类型与泛型
在 Vue 3 中,TypeScript 提供了强大的类型系统,帮助我们更好地管理代码的类型安全。通过使用 接口(Interface)、自定义类型(Type Aliases) 和 泛型(Generics),我们可以编…...
[SaaS] 内容创意生产平台
1.即梦 2.讯飞绘镜 typemovie 3.Krea.ai 4.Pika 5.runway 6.pixVerse 7....
低代码系统-产品架构案例介绍、明道云(十一)
明道云HAP-超级应用平台(Hyper Application Platform),其实就是企业级应用平台,跟微搭类似。 通过自设计底层架构,兼容各种平台,使用低代码做到应用搭建、应用运维。 企业级应用平台最大的特点就是隐藏在冰山下的功能很深…...
2025年1月26日(超声波模块:上拉或下拉电阻)
添加上拉或下拉电阻是在电子电路设计和嵌入式系统编程中常用的一种技术手段,下面为你详细解释其含义、作用和应用场景。 基本概念 在数字电路里,引脚的电平状态通常有高电平(逻辑 1)和低电平(逻辑 0)两种…...
【自然语言处理(NLP)】深度循环神经网络(Deep Recurrent Neural Network,DRNN)原理和实现
文章目录 介绍深度循环神经网络(DRNN)原理和实现结构特点工作原理符号含义公式含义 应用领域优势与挑战DRNN 代码实现 个人主页:道友老李 欢迎加入社区:道友老李的学习社区 介绍 **自然语言处理(Natural Language Pr…...
C语言学习阶段性总结(五)---函数
函数构成五要素: 1、返回值类型 2、函数名 3、参数列表(输入) 4、函数体 (算法) 5、返回值 (输出) 返回值类型 函数名 (参数列表) { 函数体; return 返回值; } void 类型…...
C++初阶—string类
第一章:为什么要学习string类 1.1 C语言中的字符串 C语言中,字符串是以\0结尾的一些字符的集合,为了操作方便,C标准库中提供了一些str系列的库函数,但是这些库函数与字符串是分离开的,不太符合OOP的思想&…...
Solon Cloud Gateway 开发:Route 的过滤器与定制
RouteFilterFactory 是专为路由过滤拦截处理设计的接口。对应路由配置 filters 1、内置的路由过滤器 过滤器工厂本置前缀说明与示例AddRequestHeaderFilterFactoryAddRequestHeader添加请求头 (AddRequestHeaderDemo-Ver,1.0)AddResponseHeaderFilterFactoryAddResponseHeade…...
【MySQL】 数据类型
欢迎拜访:雾里看山-CSDN博客 本篇主题:【MySQL】 数据类型 发布时间:2025.1.27 隶属专栏:MySQL 目录 数据类型分类数值类型tinyint类型数值越界测试结果说明 bit类型基本语法使用注意事项 小数类型float语法使用注意事项 decimal语…...
基于vue和elementui的简易课表
本文参考基于vue和elementui的课程表_vue实现类似课程表的周会议列表-CSDN博客,原程序在vue3.5.13版本下不能运行,修改两处: 1)slot-cope改为v-slot 2)return background-color:rgb(24 144 255 / 80%);color: #fff; …...
vim的多文件操作
[rootxxx ~]# vim aa.txt bb.txt cc.txt #多文件操作 next #下一个文件 prev #上一个文件 first #第一个文件 last #最后一个文件 快捷键: ctrlshift^ #当前和上个之间切换 说明:快捷键ctrlshift^,…...
spring spring-boot spring-cloud发布以及适配
https://spring.io/blog/2024/10/01/from-spring-framework-6-2-to-7-0 看了 spring 的官网,提到 2025 年 spring 会跟随 jdk 25 LTS发布后,接着发布 Spring Framework 7.0 GA,与之对应 spring 系列的组件版本情况如下。 Spring Framework版…...
【快速上手】阿里云百炼大模型
为了创建自己的知识库,本文介绍一下阿里云的百炼大模型,方便大家快速上手!快速查询自己想要的内容。 一、入口页 阿里云登录 - 欢迎登录阿里云,安全稳定的云计算服务平台 二、大模型的选择 首先前提条件是 1、账号不能欠费 2、需…...
Linux:多线程[2] 线程控制
了解: Linux底层提供创建轻量级进程/进程的接口clone,通过选择是否共享资源创建。 vfork和fork都调用的clone进行实现,vfork和父进程共享地址空间-轻量级进程。 库函数pthread_create调用的也是底层的clone。 POSIX线程库 与线程有关的函数构…...
010 mybatis-PageHelper分页插件
文章目录 添加依赖配置PageHelper项目中使用PageHelper注意事项 PageHelper分页插件介绍 https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/en/HowToUse.md 使用方法 添加依赖 <dependency><groupId>com.github.pagehelper</groupId>&l…...
【huawei】云计算的备份和容灾
目录 1 备份和容灾 2 灾备的作用? ① 备份的作用 ② 容灾的作用 3 灾备的衡量指标 ① 数据恢复时间点(RPO,Recoyery Point Objective) ② 应用恢复时间(RTO,Recoyery Time Objective) 4…...
CVE-2023-38831 漏洞复现:win10 压缩包挂马攻击剖析
目录 前言 漏洞介绍 漏洞原理 产生条件 影响范围 防御措施 复现步骤 环境准备 具体操作 前言 在网络安全这片没有硝烟的战场上,新型漏洞如同隐匿的暗箭,时刻威胁着我们的数字生活。其中,CVE - 2023 - 38831 这个关联 Win10 压缩包挂…...
回顾:Maven的环境搭建
1、下载apache-maven-3.6.0 **网址:**http://maven.apache.org 然后解压到指定的文件夹(记住文件路径) 2、配置Maven环境 复制bin文件夹 的路径D:\JavaTool\apache-maven-3.6.0\bin 环境配置成功 3、检查是否配置成功 winR 输入cmd 命令行输入mvn -v…...
从零到全栈开发
HTML:超文本标记语言 CSS:层叠样式表 HTML可以理解为框架----(毛坯房) CSS 可以理解为装修----(装修) 学习工具: Vscode应用----扩展(中文) AI ----KiMi ,豆…...
单片机-STM32 WIFI模块--ESP8266 (十二)
1.WIFI模块--ESP8266 名字由来: Wi-Fi这个术语被人们普遍误以为是指无线保真(Wireless Fidelity),并且即便是Wi-Fi联盟本身也经常在新闻稿和文件中使用“Wireless Fidelity”这个词,Wi-Fi还出现在ITAA的一个论文中。…...
两种交换排序算法--冒泡,快速
目录 1.冒泡排序原理 2.快速排序原理 3.冒泡代码实现 4.快速排序代码实现 1.冒泡排序原理 冒泡排序(Bubble Sort)是一种简单的排序算法,基本思想是通过反复交换相邻的元素,直到整个序列有序。它的名字来源于较大的元素像气泡…...
langchain基础(一)
模型又可分为语言模型(擅长文本补全,输入和输出都是字符串)和聊天模型(擅长对话,输入时消息列表,输出是一个消息)两大类。 以调用openai的聊天模型为例,先安装langchain_openai库 1…...
【学术会议征稿】第五届能源、电力与先进热力系统学术会议(EPATS 2025)
能源、电力与先进热力系统设计是指结合物理理论、工程技术和计算机模拟,对能源转换、利用和传输过程进行设计的学科领域。它涵盖了从能源的生产到最终的利用整个流程,旨在提高能源利用效率,减少能源消耗和环境污染。 重要信息 官网…...
MyBatis框架基础学习及入门案例(2)
目录 一、数据库建表(tb_user)以及添加数据。 (1)数据库与数据表说明。 (2)字段与数据说明。 二、创建模块(或工程)、导入对应所需依赖坐标。 三、编写MyBatis核心主配置文件。(解决JDBC中"硬编码"问题) (1&…...
Salesforce Too Many Email Invocations: 11
在 Salesforce 中,“Too Many Email Invocations: 11” 错误通常表示您的组织在单个事务中超过了 Apex 电子邮件调用的限制。Salesforce 设置这些限制是为了防止滥用并确保公平使用。以下是解决该问题的方法: 理解限制 Salesforce 允许每个事务中最多进…...
2274. 不含特殊楼层的最大连续楼层数
2274. 不含特殊楼层的最大连续楼层数 题目链接:2274. 不含特殊楼层的最大连续楼层数 代码如下: class Solution { public:int maxConsecutive(int bottom, int top, vector<int>& special) {ranges::sort(special);int res max(special[0] …...
RGB 转HSV空间颜色寻找色块
文章目录 前言一、绿色确定二、红色确定总结 前言 提示:这里可以添加本文要记录的大概内容: 项目需要: 将RGB颜色空间转换为HSV颜色空间以寻找颜色,主要基于以下几个原因: 直观性: HSV颜色空间更符合人类…...
Kafka生产者ACK参数与同步复制
目录 生产者的ACK参数 ack等于0 ack等于1(默认) ack等于-1或all Kafka的同步复制 使用误区 生产者的ACK参数 Kafka的ack机制可以保证生产者发送的消息被broker接收成功。 Kafka producer有三种ack机制 ,分别是 0,1…...
计算机图形学试题整理(期末复习/闭or开卷/>100道试题/知识点)
1.各种坐标变换,会产生变换前后维度改变的是(投影变换)。 A)建模变换;B)观察变换;C)投影变换;D)视口变换 不同的坐标变换对维度的影响如下: 建模…...
Ubuntu 24.04 安装 NVIDIA Container Toolkit 全指南:让Docker拥抱GPU
Ubuntu 24.04 安装 NVIDIA Container Toolkit 全指南:让Docker拥抱GPU 前言一、环境准备1.1 验证驱动状态 二、安装NVIDIA Container Toolkit2.1 添加官方仓库2.2 执行安装 三、配置Docker运行时3.1 更新Docker配置 四、验证安装结果4.1 运行测试容器 五、实战应用 …...
python3+TensorFlow 2.x(三)手写数字识别
目录 代码实现 模型解析: 1、加载 MNIST 数据集: 2、数据预处理: 3、构建神经网络模型: 4、编译模型: 5、训练模型: 6、评估模型: 7、预测和可视化结果: 输出结果ÿ…...
aws(学习笔记第二十六课) 使用AWS Elastic Beanstalk
aws(学习笔记第二十六课) 使用aws Elastic Beanstalk 学习内容: AWS Elastic Beanstalk整体架构AWS Elastic Beanstalk的hands onAWS Elastic Beanstalk部署node.js程序包练习使用AWS Elastic Beanstalk的ebcli 1. AWS Elastic Beanstalk整体架构 官方的guide AWS…...
GestureDetector组件的功能与用法
文章目录 1 概念介绍2 使用方法3 示例代码 我们在上一章回中介绍了ListView响应事件的内容,本章回中将介绍GestureDetector Widget.闲话休提,让我们一起Talk Flutter吧。 1 概念介绍 我们在这里介绍的GestureDetector是一个事件响应Widget,它可以响应双击事件&…...
【HuggingFace项目】:Open-R1 - DeepSeek-R1 大模型开源复现计划
项目链接:https://github.com/huggingface/open-r1 概述 Open-R1 是由 HuggingFace 发布的一个完全开放的项目,旨在通过三个主要步骤复现 DeepSeek-R1 的完整训练流程。这个项目的目标是让更多人能够理解和使用 DeepSeek-R1 的技术方案,从而…...
K8S中数据存储之配置存储
配置存储 在Kubernetes中,ConfigMap和Secret是两种核心资源,用于存储和管理应用程序的配置数据和敏感信息。理解它们的功能和最佳实践对于提高Kubernetes应用程序的安全性和配置管理的效率至关重要。 ConfigMap ConfigMap是一种API对象,允许…...
群辉折腾日记【连续剧】
安装群辉6.23版本 对比不同的版本以及自己的硬件条件,我选择了6.2.3稳定养老版本,硬件参数可以看之前的文章:pve (群辉、软路由、win/linux)折腾日记 之前年轻气盛喜欢折腾,秉持着一个原则,可以不用,但不能…...
AIGC视频生成模型:慕尼黑大学、NVIDIA等的Video LDMs模型
大家好,这里是好评笔记,公主号:Goodnote,专栏文章私信限时Free。本文详细介绍慕尼黑大学携手 NVIDIA 等共同推出视频生成模型 Video LDMs。NVIDIA 在 AI 领域的卓越成就家喻户晓,而慕尼黑大学同样不容小觑,…...
Hadoop 与 Spark:大数据处理的比较
💖 欢迎来到我的博客! 非常高兴能在这里与您相遇。在这里,您不仅能获得有趣的技术分享,还能感受到轻松愉快的氛围。无论您是编程新手,还是资深开发者,都能在这里找到属于您的知识宝藏,学习和成长…...
VB6.0 显示越南语字符
近期接到客户咨询,说是VB6.0写软件界面上显示越南语乱码,需要看看怎样解决。 我在自己电脑上也试了下,确实显示越南语结果是乱码。编辑器里乱码,运行起来界面上也是乱码。 经过一天的折腾,算是解决了问题,…...
微信小程序中实现进入页面时数字跳动效果(自定义animate-numbers组件)
微信小程序中实现进入页面时数字跳动效果 1. 组件定义,新建animate-numbers组件1.1 index.js1.2 wxml1.3 wxss 2. 使用组件 1. 组件定义,新建animate-numbers组件 1.1 index.js // components/animate-numbers/index.js Component({properties: {number: {type: Number,value…...
网络仿真工具Core环境搭建
目录 安装依赖包 源码下载 Core安装 FAQ 下载源码TLS出错误 问题 解决方案 找不到dbus-launch 问题 解决方案 安装依赖包 调用以下命令安装依赖包 apt-get install -y ca-certificates git sudo wget tzdata libpcap-dev libpcre3-dev \ libprotobuf-dev libxml2-de…...
JavaScript 的 Promise 对象和 Promise.all 方法的使用
JavaScript 中的 Promise 对象 什么是 Promise? Promise 是一种用于处理异步操作的对象。它代表一个尚未完成但预计将来会完成的操作及其结果。 主要特点: 状态: Pending(进行中): 初始状态,既未成功,也未失败。Fu…...
农产品价格报告爬虫使用说明
农产品价格报告爬虫使用说明 # ************************************************************************** # * * # * 农产品价格报告爬虫 …...
Java 大视界 -- Java 大数据中的隐私增强技术全景解析(64)
💖亲爱的朋友们,热烈欢迎来到 青云交的博客!能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也…...
实战Linux Swap扩展分区
文章目录 定义命令格式案例注释 定义 Swap分区是Linux系统中的一种虚拟内存实现方式,它是磁盘上预留的专用区域。当系统的物理内存不足时,会将部分不活跃的数据从物理内存移动到Swap分区,从而释放更多可用内存空间。 命令格式 关闭Swap分区…...
doris:Parquet导入数据
本文介绍如何在 Doris 中导入 Parquet 格式的数据文件。 支持的导入方式 以下导入方式支持 Parquet 格式的数据导入: Stream LoadBroker LoadINSERT INTO FROM S3 TVFINSERT INTO FROM HDFS TVF 使用示例 本节展示了不同导入方式下的 Parquet 格式使用方法…...
Synology 群辉NAS安装(6)安装mssql
Synology 群辉NAS安装(6)安装mssql 写在前面mssql 2019:成功安装说明,这个最终成功了 mssql 2022没有成功1. pull image2.启动mssql docker container 远程连接 写在前面 mssq是一个重要节点。 这是因为我对mysql没有一丝好感。虽然接触了许…...
使用.NET 8构建高效的时间日期帮助类
使用.NET 8构建高效的时间日期帮助类 在现代Web应用程序中,处理日期和时间是一个常见的需求。无论是记录日志、生成报告还是进行数据分析,正确处理日期和时间对于确保数据的准确性和一致性至关重要。本文将详细介绍如何使用ASP.NET Core和C#构建一个高效…...
第26篇 基于ARM A9处理器用C语言实现中断<二>
Q:基于ARM A9处理器怎样编写C语言工程,使用按键中断将数字显示在七段数码管上呢? A:基本原理:主程序需要首先调用子程序set_A9_IRQ_stack()初始化IRQ模式的ARM A9堆栈指针;然后主程序调用子程序config_GIC…...
dm8在Linux环境安装精简步骤说明(2024年12月更新版dm8)
dm8在Linux环境安装详细步骤 - - 2025年1月之后dm8 环境介绍1 修改操作系统资源限制2 操作系统创建用户3 操作系统配置4 数据库安装5 初始化数据库6 实例参数优化7 登录数据库配置归档与备份8 配置审计9 创建用户10 屏蔽关键字与数据库兼容模式11 jdbc连接串配置12 更多达梦数据…...