【Vue3】解锁Vue3黑科技:探索接口、泛型和自定义类型的前端奇迹

简介: 【Vue3】解锁Vue3黑科技:探索接口、泛型和自定义类型的前端奇迹

🍋介绍

Vue3中,我们不仅可以利用其强大的响应式系统和组件化开发来构建灵活的前端应用程序,还可以利用TypeScript(简称TS)的特性来增强代码的可读性、可维护性和类型安全性。在本文中,我们将深入探讨Vue3中接口、泛型和自定义类型的使用,以便更好地利用这些功能来构建优秀的Vue应用

🍋接口

首先我们介绍一下接口

接口在Vue3中是一种定义对象结构的方式,它可以用来描述对象的形状,包括属性和方法。通过接口,我们可以明确指定组件的props、data等属性的类型,从而在编译时捕获潜在的错误

老样子,我们准备初始代码

<template>
  <div class="person">
    Python
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
   let person = {id:'1515',name:'馒头',age:22}
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

上面的代码在页面中仅仅显示了Python

如果我们写代码的时候,对于有些数据写错了但是又仅仅是失误造成的,这样是不会给我们进行错误提示的,这样就需要我们使用接口了

首先我们需要创建一个文件夹并创建index.ts文件,这样创建的好处是引入路径更方便

接下来我们定义一个接口,目的是为了限制Person对象的具体属性

export interface PersonInter {
    id:string,
    name:string,
    age:number`  let personList = [
    {id:'a',name:'大馒头',age:18},
    {id:'b',name:'中馒头',age:19},
    {id:'c',name:'小馒头',age:20}
  ]`
  }

接下来我们进行导入

import {type PersonInter} from '@/types'

同时我们进行定义,目的是让Person符合这个PersonInter接口

let person:PersonInter = {id:'1515',name:'馒头',age:22}

🍋泛型

接下来我们定义一个数组

let personList = [
    {id:'a',name:'大馒头',age:18},
    {id:'b',name:'中馒头',age:19},
    {id:'c',name:'小馒头',age:20}
  ]

如果我们想要这个数组也满足规范应该怎么做呢,下面我将展示

let personList : Array<PersonInter>= [
    {id:'a',name:'大馒头',age:18},
    {id:'b',name:'中馒头',age:19},
    {id:'c',name:'小馒头',age:20}
  ]

上面的含义主要是,数组中的每一个都将满足规则

🍋自定义类型

在index.ts中定义

export type Persons = PersonInter[]

之后在Person.vue中进行导入即可,同时我们将之前的Array PersonInter修改为我们自定义的Persons就可以了,是不是很方便啊~~~

<template>
  <div class="person">
    Python
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
  import {type PersonInter,type Persons} from '@/types'
  let personList : Persons= [
    {id:'a',name:'大馒头',age:18},
    {id:'b',name:'中馒头',age:19},
    {id:'c',name:'小馒头',age:20}
  ]
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

🍋接口、泛型、自定义相对比

接口 vs 泛型:

接口用于描述对象的形状,泛型用于增强代码的灵活性。

接口在定义对象结构时更为直观,而泛型适用于编写通用的、适用于多种类型的代码。


泛型 vs 自定义类型:

泛型用于增强代码的灵活性,而自定义类型用于提高代码的可读性和类型安全性。

泛型可以用于编写通用的代码,而自定义类型用于定义具体的类型结构。

🍋结论

在Vue3中,接口、泛型和自定义类型是强大的工具,可以帮助我们编写更加健壮、灵活和可维护的代码。通过合理地使用这些功能,我们可以有效地减少错误,并提高代码的质量和可读性。因此,在开发Vue应用程序时,建议充分利用这些功能来提升开发效率和代码质量

挑战与创造都是很痛苦的,但是很充实。

相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
190 2
|
4月前
|
前端开发 JavaScript Java
【前端学java】Java中的接口和枚举概念(8)
【8月更文挑战第9天】Java中的接口和枚举概念(8)
53 4
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
2月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
2月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
2月前
|
人工智能 前端开发 JavaScript
前端大模型入门(二):掌握langchain的核心Runnable接口
Langchain.js 是 Langchain 框架的 JavaScript 版本,专为前端和后端 JavaScript 环境设计。最新 v0.3 版本引入了强大的 Runnable 接口,支持灵活的执行方式和异步操作,方便与不同模型和逻辑集成。本文将详细介绍 Runnable 接口,并通过实现自定义 Runnable 来帮助前端人员快速上手。
|
1月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
239 0
|
4月前
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法,并提供了详细的示例代码和运行效果。
207 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
|
4月前
|
前端开发 Java C++
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
使用Vite和Vue3构建支持共享组件和分模块独立打包的前端项目的方法。
548 0
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
|
4月前
|
JavaScript 前端开发 安全
解锁Vue3与TypeScript的完美搭档:getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分,让开发者能在组件内访问实例。结合TypeScript,可通过定义组件实例类型实现更好的代码提示与类型检查,提升开发效率与代码质量。例如,定义一个带有特定属性(如myData)的组件实例类型,可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误,使开发更加高效和安全。
184 0