【Vue】Vue3.0(十四)接口,泛型和自定义类型的概念及使用

上篇文章: 【Vue】Vue3.0(十三)中标签属性ref(加在普通标签上、加在组件标签上)、局部样式

🏡作者主页:点击!

🤖Vue专栏:点击!

⏰️创作时间:2024年10月20日12点50分

文章目录

    • 1、接口概念作用及定义
    • 2、泛型和自定义类型;比如可以规定一个数组中的元素的类型:
      • 写法一:在定义具体变量的时候使用泛型
      • 写法二;在定义接口的时候,定义自定义类型就使用泛型

1、接口概念作用及定义

在 Vue 3 中,接口是一种用于定义对象形状的方式,它可以帮助我们确保组件接收正确的数据类型和结构。接口的使用可以提高代码的可读性和可维护性,特别是在涉及到组件之间的数据传递和交互时;

接口的定义
在 Vue 3 中,可以使用 TypeScript 来定义接口。接口使用interface关键字进行声明,后面跟着接口的名称(通常以大写字母I开头,这是一种命名约定,但不是必需的),然后是一对花括号,在花括号内定义接口的属性和方法。例如:

interface IUser {id: number;name: string;age: number;
}

在上述代码中,定义了一个名为IUser的接口,它描述了一个用户对象的形状,包含id、name和age三个属性,分别为数字类型、字符串类型和数字类型。

作用:比如我在其他的组件中想要创建一个Person类型的对象,那如果有这个标准规则了,如果创建的对象中的属性错误的话,那就会自动提示,让我们进行修改,以避免我们属性因为大意写错。
使用例子:
定义规则
在这里插入图片描述
使用规则定义变量
在这里插入图片描述
在这里插入图片描述

定义的personEx变量中有Interface种的属性,符合属性的名字和类型,所以不会提示错误,如果其中的name写成了name1,那就会提示红线,让我们进行修改。

2、泛型和自定义类型;比如可以规定一个数组中的元素的类型:

写法一:在定义具体变量的时候使用泛型


<script lang="ts" setup name="Person">
import {type personInter} from '@/types'
//let personEx:personInter={id:'1121212',name:'张三',age:18}
//console.log('personEx=',personEx);//规定一个数组中的每一个元素都是person类型的规则
let persons:Array<personInter> =[  //在定义具体变量的时候使用了泛型{id:'1121211',name:'张三',age:18},{id:'1121213',name:'王五',age:19},{id:'1121215',name:'赵六',age:20}
]
console.log('persons=',persons);</script>

写法二;在定义接口的时候,定义自定义类型就使用泛型

先定义 一个自定义类型:type

//定义自定义类型:一个Person数组中元素类型
export type persons = Array<personInter> //写法二
export type persons2=personInter[]//写法三

使用

<template><div class="person">???</div>
</template><script lang="ts" setup name="Person">
import { type personInter, type persons, type persons2 } from '@/types'
let personEx: personInter = { id: '1121212', name: '张三', age: 18 }
console.log('personEx=', personEx);//方法一:规定一个数组中的每一个元素都是person类型的规则
let persons: Array<personInter> = [{ id: '1121211', name: '张三', age: 18 },{ id: '1121213', name: '王五', age: 19 },{ id: '1121215', name: '赵六', age: 20 }
]
console.log('persons=', persons);//方法二定义一个元素符合personInter规则的数组
let personList2: persons = [{ id: '1121211', name: '张三', age: 18 },
{ id: '1121213', name: '王五', age: 19 },
{ id: '1121215', name1: '赵六', age: 20 }]
console.log('personList2=', personList2);//方法三 定义一个元素符合personInter规则的数组
let personList3: persons2 = [{ id: '1121211', name: '张三', age: 18 },
{ id: '1121213', name1: '王五', age: 19 },
{ id: '1121215', name: '赵六', age: 20 }]
console.log('personList3=', personList3);</script><style scoped>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}li {font: 1em sans-serif;
}
</style>

结果:
在这里插入图片描述
如果编写代码的时候填写错误,也都会有错误提示:
在这里插入图片描述

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

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

相关文章

Windows进程的睡眠与唤醒

在总体架构庞大、包含很多进程协同工作的系统中。有时把系统内某些后台进程睡眠&#xff0c;待需要时再唤醒&#xff0c;可以节约操作系统资源&#xff0c;提升系统运行效率。 进程睡眠&#xff1a; bool Widget::suspendProcess(DWORD targetProcessId) {// 获取进程句柄HAN…

数据结构——二叉树的基本操作及进阶操作

前言 介绍 &#x1f343;数据结构专区&#xff1a;数据结构 参考 该部分知识参考于《数据结构&#xff08;C语言版 第2版&#xff09;》116 ~ 122页 及 《数据结构教程》201 ~ 213页 重点 树的基本实现并不难&#xff0c;重点在于对递归的理解才是树这部分知识带来的最大收…

python绝对值怎么表示

python abs()函数用于获取数字的绝对值&#xff0c;参数可以是负数、正数、浮点数或者长整形。 语法&#xff1a; abs( x ) 下面是详细参数&#xff1a; X&#xff1a;这是一个数值表达式。 返回值&#xff1a; x的绝对值。 例如&#xff1a; #!/usr/bin/python print &q…

smbms(2)

目录 一、修改密码功能实现 二、优化密码修改&#xff0c;加入旧密码确认环节【使用Ajax】 三、用户管理实现 获取用户数量 获取用户列表 获取角色列表 Servlet 一、修改密码功能实现 1、导入前端素材 2、UserDao接口 3、UserDaoImpl实现类 4、UserService接口 5、Us…

解决ffmpeg通过srt文件给视频添加字幕时乱码问题

ffmpeg添加字幕乱码 #添加源 echo "deb http://deb.debian.org/debian bookworm contrib non-free" > /etc/apt/sources.list.d/contrib.list #更新源 apt-get install ttf-mscorefonts-installer apt-get install fontconfig apt-get update cd /usr/share/fon…

Unity中常用组件介绍

在Unity中&#xff0c;组件是构建游戏对象功能的基本单元。以下是一些常见的Unity组件及其作用&#xff1a; Transform&#xff1a;控制对象的位置、旋转和缩放。每个游戏对象都默认为有这个组件。 Rigidbody&#xff1a;使对象受物理影响&#xff08;如重力、碰撞等&#xff…

人脸识别系统概述

人脸识别是目前人工智能领域中成熟较早、落地较广的技术之一&#xff0c;广泛应用于手机解锁、支付验证、安防布控等多个领域。其核心在于通过特定的算法识别图像或视频中人脸的身份&#xff0c;这一过程的实现离不开特征算法的支持。以下是对人脸识别特征算法的详细介绍&#…

力扣76~80题

题76&#xff08;困难&#xff09;&#xff1a; 分析&#xff1a; 这道题其实不难&#xff0c;但是是我做最久的了&#xff0c;我居然去用res去接所有可能得值&#xff0c;然后再求长度导致空间暴力&#xff0c;我还以为是我queue的问题。。。 最后用暴力求解解的&#xff0c…

hardhat部署智能合约

Hardhat安装 安装node 可以使用 nvm 安装node GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions 安装Hardhat 打开命令行工具&#xff0c;输入&#xff1a; mkdir hardhat-demo cd hardhat-demo npm i…

【wpf】08 xml文件的存取操作

在使用wpf编程过程中&#xff0c;会用到xml的配置文件&#xff0c;实现对其读取和存储的操作是必须的。 1 xml说明 可扩展标记语言 (Extensible Markup Language, XML) &#xff0c;标准通用标记语言的子集&#xff0c;可以用来标记数据、定义数据类型&#xff0c;是一种允许…

数据库`addtime(t, n)` 函数

在编程中&#xff0c;addtime(t, n) 这个函数并不是一个标准的内置函数&#xff0c;但我们可以根据这个函数的描述来构想一个实现方式。假设 t 是一个表示时间的对象或值&#xff08;比如时间戳、日期时间对象等&#xff09;&#xff0c;而 n 是一个时间间隔&#xff08;比如秒…

破局汽车基础软件发展丨昂辉科技亮相2024芜湖新能源汽车零部件和后市场生态博览会

10月14—17日&#xff0c;2024芜湖新能源汽车零部件和后市场生态博览会在芜湖市宜居国际博览中心盛大开幕。昂辉科技携新一代EasySAR车载基础软件工具链产品亮相核心零部件展区。 作为新能源汽车行业的一次盛会&#xff0c;本届博览会以“会议论坛展区展示”为特色&#xff0c…

【算法学习】冒泡排序

1. 冒泡排序 详情在下列注释里 package com.tool.tooladmin.algorithm;import com.tool.tooladmin.config.result.AjaxResult; import com.tool.tooladmin.config.result.BaseController; import org.springframework.web.bind.annotation.*;import java.math.BigDecimal;/**…

cefsharp79.1.360(Chromium 79.0.3945.130)支持H264视频播放-PDF预览 老版本回顾系列体验

一、关于此版本 版本:Cef 79.1.36/CefSharp 79.1.360/Chromium 79.0.3945.130/支持H264/支持PDF预览 支持PDF预览和H264推荐版本 63/79/84/88/100/111/125 运行环境需要 visual c++ 2015不支持xp/vista/2003/2008默认不支持h264(版权问题)支持打印预览 print preview已知问题…

网络资源模板--Android Studio 实现简易新闻App

目录 一、项目演示 二、项目测试环境 三、项目详情 四、完整的项目源码 一、项目演示 网络资源模板--基于Android studio 实现的简易新闻App 二、项目测试环境 三、项目详情 登录页 用户输入&#xff1a; 提供账号和密码输入框&#xff0c;用户可以输入登录信息。支持“记…

HiveOnSpark环境下,Spark 挂了问题排查思路

在 Hive on Spark 模式下&#xff0c;Hive 使用 Spark 作为其执行引擎运行查询。如果 Spark 挂了&#xff0c;分析和解决错误通常需要查看多个地方的日志和配置。以下是分析 Spark 挂掉问题的详细步骤和方法。 1. 检查 Hive 查询日志 首先&#xff0c;在 Hive 中执行的查询都会…

RestHighLevelClient操作es查询文档

目录 利用RestHighLevelClient客户端操作es查询文档 查询match_all dsl语句&#xff1a; ​编辑 java代码 小结 match字段全文检索查询 dsl语句 java代码 multi_match多字段全文检索查询 dsl语句 java代码 term精确查询 dsl语句 java代码 range范围查询 dsl语句 j…

基于SpringBoot的旅店管理系统的设计与实现源码+Vue前端(酒店、民宿、功能较多)

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

Windows系统部署redis自启动服务【亲测可用】

文章目录 引言I redis以本地服务运行(Windows service)使用MSI安装包配置文件,配置端口和密码II redis服务以终端命令启动缺点运行redis-server并指定端口和密码III 知识扩展确认redis-server可用性Installing the Service引言 服务器是Windows系统,所以使用Windows不是re…

文献阅读:通过深度神经网络联合建模多个切片构建3D整体生物体空间图谱

文献介绍 文献题目&#xff1a; 通过深度神经网络联合建模多个切片构建3D整体生物体空间图谱 研究团队&#xff1a; 杨灿&#xff08;香港科技大学&#xff09;、吴若昊&#xff08;香港科技大学&#xff09; 发表时间&#xff1a; 2023-10-19 发表期刊&#xff1a; Nature M…