TS中的接口、泛型、自定义类型 与vue3的使用

news2024/11/20 19:31:14

泛型的使用场景:

当我们定义了一个对象时,在多次传值的过程中,其对象中的属性值被更改了,以至于后期拿不到我们需要的数据。

举个例子,当我们使用person.name时,是可以使用的。但是多次传递之后,属性值写成naem,此时我们使用person.name是不生效的!!!

现在我们对数据,进行限制,使用泛型或者接口的形式,确保数据的安全:

正常定义一个person对象类型:

<script lang="ts"" setup name="TsPerson">

let person={
    age:18,
    id:"1",
    name:"张三"
}
</script>

此时的数据是不安全的!!!

接口约束

现在我们定义一个接口:

目录在src/types/index.ts

//定义一个接口,用于限制person对象的具体属性
export interface PersonInterface {
    id:string,
    name:string,
    age:number
}

我们需要将数据进行导入:

<script lang="ts"" setup name="TsPerson">
import { type PersonInterface } from "@/types"; //@指从src路径开始 
//使用泛型显示对象的属性
let person:PersonInterface ={
    age:18,
    id:"1",
    name:"张三"
}

</script>

此时的对象就是被约束过的,id、name都是string类型

现在需求升级了,我们需要以上PersonInterface接口类型的数据数组

我们可以直接使用之前我们定义的接口类型,指定我们创建对象,需要创建什么样的数组就行:

<script lang="ts"" setup name="TsPerson">

import { type PersonInterface } from "@/types"; //@指从src路径开始 

//使用泛型定义数组对象
// 方式一:
let personArray:Array<PersonInterface> = [
    {id:"123",name:"张三",age:18},
    {id:"234",name:"李四",age:19},
    {id:"456",name:"王五",age:20}
]

// 方式二:
let personList:PersonInterface[] = [
    {id:"123",name:"张三",age:18},
    {id:"234",name:"李四",age:19},
    {id:"456",name:"王五",age:20}
]

</script>

我们可以换种写法:

自定义类型约束 

首先,我们在之前创建的文件中,创建自定义的类型type,

切记一定要export否则,在另一个文件中不能引入该类型

//定义一个接口,用于限制person对象的具体属性
export interface PersonInterface {
    id:string,
    name:string,
    age:number
}

//自定义类型
// 定义数组的两种方式
export type Persons = PersonInterface[]

export type PersonArray = Array<PersonInterface>

export interface PersonListInterface{  //定义一个接口
    list:PersonInterface[]
}

在文件中进行引入:

<script lang="ts"" setup name="TsPerson">
// import {type PersonInterface,type PersonListInterface,type Persons,type personArray} from "../../types/index"
import { type PersonInterface, type PersonListInterface,type Persons,type PersonArray } from "@/types"; //@指从src路径开始 ,与上面语法等价

//方式三:
let personList2:Persons = [
    {id:"123",name:"张三",age:18},
    {id:"234",name:"李四",age:19},
    {id:"456",name:"王五",age:20}
]

//方式四:
let personList3:PersonArray = [
    {id:"123",name:"张三",age:18},
    {id:"234",name:"李四",age:19},
    {id:"456",name:"王五",age:20}
]


//方式五:
let personList4:PersonListInterface = {
    list:[
        {id:"123",name:"张三",age:18},
        {id:"234",name:"李四",age:19},
        {id:"456",name:"王五",age:20}
    ]
}
</script>

测试:

当我们不小心写错时,会给出相应的提示信息!

扩展知识:

 在script标签中导入外部文件时,我们可以使用 @ 快速定位到src目录,例如

import {type PersonInterface} from "../../types/index"
import { type PersonInterface} from "@/types"; //@指从src路径开始 ,与上面语法等价

在style标签中导入外部文件时,我们可以使用 @import进行导入,但是并不是从src目录开始的

,但是下面是等价的!

@import "/src/Css/divBox.css"; 
@import "../../Css/divBox.css"

响应式对象如何限制泛型?

首先尝试,基于之前限制的使用方式: 

<script lang="ts" setup name="Father">
import { reactive } from "vue";
import child from "./child.vue";
import {type Persons } from "@/types/index"

//这种方式不建议使用
let person:Persons = reactive([
  {id:"1",da:"张三",age:18},
  {id:"2",name:"李四",age:19},
  {id:"3",name:"王五",age:20},
])

</script>

此时提示(大概意识是你不能将一个类型的数据,赋值给另一个数据对象):

限制我们使用泛型的方式进行限制:

<script lang="ts" setup name="Father">
import { reactive } from "vue";
import child from "./child.vue";
import {type Persons } from "@/types/index"

//推荐指数*****
let personList = reactive<Persons>([
  {id:"1",sd:"张三",age:18},
  {id:"2",name:"李四",age:19},
  {id:"3",name:"王五",age:20},
])

</script>

 查看,提示很清晰,:

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

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

相关文章

讯方·智汇云校华为ICT大赛赛前辅导直播安排

华为ICT大赛赛前辅导直播安排 网络赛道在“智汇云校”视频号上观看。 直播时间&#xff1a; 网络&#xff1a;2024.10.14-10.15-10.17-10.18-10.21-10.23-10.25-10.28-10.29-10.30-11.1-11.4-11.5-11.6&#xff0c;每晚19&#xff1a;30-22&#xff1a;00 安全&#xff1a;2024…

【Next.js 入门教程系列】05-数据库

原文链接 CSDN 的排版/样式可能有问题&#xff0c;去我的博客查看原文系列吧&#xff0c;觉得有用的话&#xff0c; 给我的库点个star&#xff0c;关注一下吧 上一篇【Next.js 入门教程系列】04-构造 API 数据库 本篇包括以下内容: Setting up PrismaDefining data modelsCreat…

pinia学习笔记(1.0)

首先贴出官网地址&#xff1a;开始 | Pinia pinia作为Vue3项目中常用的状态管理工具&#xff0c;正逐渐取代vuex&#xff0c;现从0到1自己搭建pinia仓库。 首先&#xff0c;安装pinia&#xff0c;使用包管理器工具&#xff08;npm,pnpm,yarn,Bun等都可以&#xff09; 安装成…

QGIS如何在正射影像中获得绘制线段的长度信息||QGIS如何获取绘制点的经纬度(如何生成WKT属性)并且导出为CSV文件

QGIS如何在正射影像中获得绘制线段的长度信息 前置条件&#xff1a; 导入正射影像和绘制完需要计算长度的绘制线段后 1.检查菜单栏是否有数据处理&#xff08;processing&#xff09;按键&#xff0c;如果没有的话请根据以下链接打开processing工具箱&#xff1a;https://bl…

微服务架构 --- Nacos的项目实战操作

目录 一.什么是Nacos&#xff1f; 二.什么是注册中心&#xff1f; 1.注册中心的定义&#xff1a; 2.为什么需要使用注册中心&#xff1f; 3.注册中心原理&#xff1a; 三.Nacos的使用&#xff1a; 1.安装与启动Nacos&#xff1a; 2.集成 Nacos 服务注册与发现&#xff…

邀你一起共建谷歌封号申诉共享库

大家好&#xff0c;我是牢鹅&#xff01;相信很多老粉是通过谷歌封号的三篇文章《聊聊「谷歌8.3」账号封禁解析与应对思路 》和《聊聊谷歌「高风险」封号问题解析与应对思路》、《聊聊这半年来&#xff0c;谷歌为何频繁封号&#xff1f;》关注牢鹅的&#xff0c;在这将近半年的…

架构设计笔记-13-层次式架构设计理论与实践

目录 知识要点 综合知识 案例分析 1.SSM框架 2.MVC模式&#xff0c;XML 3.MVC架构脆弱性 4.容器技术的优势 5.对象关系映射ORM技术 知识要点 一般来说&#xff0c;架构可以分为表现层、中间层和持久层三个层次。 表现层&#xff1a;表现层主要负责接收用户的请求&…

【论文翻译】TITAN:用于交通流量预测的异构专家混合模型

题目A TIME SERIES IS WORTH FIVE EXPERTS: HETEROGENEOUS MIXTURE OF EXPERTS FOR TRAFFIC FLOW PREDICTION论文链接https://arxiv.org/pdf/2409.17440源码地址https://github.com/sqlcow/TITAN&#xff08;作者说论文被接受后&#xff0c;代码将更新&#xff09; 摘要 准确的…

API项目4:开发SDK

面临另一个问题 作为开发者&#xff0c;每次调用接口都需要自己生成时间戳&#xff0c;编写签名算法&#xff0c;生成随机数等等&#xff0c;这些都是相当繁琐的工作。 因此&#xff0c;要想办法让开发者能够以最简单的方式调用接口。开发者只需要关心传递哪些参数以及他们的…

如何通过计算巢在阿里云一键部署FlowiseAI

什么是FlowiseAI FlowiseAI 是一个开源的低代码开发工具&#xff0c;专为开发者构建定制的语言学习模型&#xff08;LLM&#xff09;应用而设计。 通过其拖放式界面&#xff0c;用户可以轻松创建和管理AI驱动的交互式应用&#xff0c;如聊天机器人和数据分析工具。 它基于Lang…

网站分享 | 六个插件搜索下载网站

网站分享&#xff1a; 今天分享几个搜索插件的网站。 &#x1f527; Chrome Web Store —— 官方插件库&#xff0c;选择最多 谷歌官方的 Chrome 插件商店&#xff0c;拥有丰富的插件供你选择。无论你是办公党、学生党&#xff0c;还是娱乐爱好者&#xff0c;这里都能找到提…

第 4 章:Vue 中的 ajax

1. 解决开发环境 Ajax 跨域问题 vue脚手架配置代理 原理图&#xff1a; 1.1 方法一 在vue.config.js中添加如下配置&#xff1a; devServer:{proxy:"http://localhost:5000" // 这个5000 是请求目标的端口号 }说明&#xff1a; 优点&#xff1a;配置简单&…

杰理AC632N---发射功率问题

AC632N的发射功率SDK默认0dbm左右&#xff0c;在实际做产品时&#xff0c;如果使用SDK默认的发射功率&#xff0c;则测试到的发射功率达不到规格书上面的8dbm. 查看代码流程发现SDK中修改发射功率的文职如下&#xff1a; 修改到level 10 则是最大功率8dbm , 使用频谱仪可以测得…

OpenAI 最新发布的 o1 模型在 ARC-AGI-Pub 数据集上的测试结果与分析

在过去的24小时内&#xff0c;我们有幸获得了 OpenAI 新发布的 o1-preview 和 o1-mini 模型的使用权限。这些模型经过特别训练&#xff0c;旨在模拟推理过程&#xff0c;并在给出最终答案之前给予更多时间生成和修正推理步骤。 成百上千的人都在问&#xff0c;o1 在 ARC 奖项上…

linux线程 | 线程的控制(一)

前言&#xff1a;本节内容为线程的控制。在本篇文章中&#xff0c; 博主不仅将会带友友们认识接口&#xff0c; 使用接口。 而且也会剖析底层&#xff0c;带领友友们理解线程的底层原理。 相信友友们学完本节内容&#xff0c; 一定会对线程的控制有一个很好的把握。 那么&#…

Gin框架官方文档详解03:HTML渲染

官方文档&#xff1a;https://gin-gonic.com/zh-cn/docs/ 注&#xff1a;强烈建议没用过Gin的读者先阅读第一节&#xff1a;第一个Gin应用。 目录 一、简单渲染二、使用不同目录下名称相同的模板三、自定义模板渲染器四、自定义分隔符五、自定义模板函数六、总结 一、简单渲染 …

数通--5

一、链路聚合 背景&#xff1a;带宽不够&#xff0c;加线&#xff0c;但是stp判断是环路&#xff0c;阻塞&#xff0c;等于没加线。通过链路聚合解决&#xff08;如果我把千兆换成万兆&#xff0c;老子有钱任性的话&#xff0c;没得说&#xff09; 现在我要的不是备份而是带宽…

电能表预付费系统-标准传输规范(STS)(4)

5.4 TokenCarrier 到 MeterApplicationProcess 的数据流 The flow of data from the TokenCarrier to the MeterApplicationProcess is shown in Figure 4.此数据流见图 4。 图 4 TokenCarrier 到 MeterApplicationProcess 的数据 The token entry process from the TokenCarr…

抢单超卖? 并发问题解决思路

1. 问题介绍 在用户抢单或者商品售卖的过程中&#xff0c;正常情况下是一人一件&#xff0c;但是当网络流量剧增时多个用户同时抢到一个商品应该如何分配&#xff1f;假设这样一个场景A商品库存是100个&#xff0c;但是秒杀的过程中&#xff0c;一共卖出去500个A商品。对于卖家…

AXI GPIO按键控制——ZYNQ学习笔记4

一、AXI GPIO接口简介 是什么&#xff1f;是PL部分的一个IP软核&#xff0c;实现通用输入输出接口的功能&#xff0c;并通过AXI协议实现与处理系统通信&#xff0c;方便控制与拓展GPIO接口。 AXI GPIO IP 核为 AXI 接口提供了一个通用的输入/输出接口。 与 PS 端的 GPIO 不同&…