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

<div class="markdown_views prism-atom-one-dark" id="content_views">
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
<path d="M5,0 0,2.5 5,5z" id="raphael-marker-block" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>
<blockquote>
<p>欢迎来到我的博客，你将找到有关如何使用技术解决问题的文章，也会找到某个技术的学习路线。无论你是何种职业，我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章，也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临，让我们一起踏上这个知识之旅！<br/> <img alt="请添加图片描述" src="https://img-blog.csdnimg.cn/5c6eb411bd2b40f68c16f607471c1634.gif"/></p>
</blockquote>
<p></p>
<div class="toc">
<h4>文章目录</h4>
<ul><li><a href="#_6" rel="nofollow">介绍</a></li><li><a href="#_10" rel="nofollow">接口</a></li><li><a href="#_68" rel="nofollow">泛型</a></li><li><a href="#_91" rel="nofollow">自定义类型</a></li><li><a href="#_129" rel="nofollow">接口、泛型、自定义相对比</a></li><li><a href="#_144" rel="nofollow">结论</a></li></ul>
</div>
<p></p>
<h2><a id="_6"></a>介绍</h2>
<blockquote>
<p>在Vue3中，我们不仅可以利用其强大的响应式系统和组件化开发来构建灵活的前端应用程序，还可以利用TypeScript(简称TS)的特性来增强代码的可读性、可维护性和类型安全性。在本文中，我们将深入探讨Vue3中接口、泛型和自定义类型的使用，以便更好地利用这些功能来构建优秀的Vue应用</p>
</blockquote>
<h2><a id="_10"></a>接口</h2>
<p>首先我们介绍一下接口</p>
<blockquote>
<p>接口在Vue3中是一种定义对象结构的方式，它可以用来描述对象的形状，包括属性和方法。通过接口，我们可以明确指定组件的props、data等属性的类型，从而在编译时捕获潜在的错误</p>
</blockquote>
<p>老样子，我们准备初始代码</p>
<pre><p style='background-color:black;color:white;padding:12px;'><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>
</p></pre>
<p>上面的代码在页面中仅仅显示了Python<br/> <img alt="在这里插入图片描述" src="https://img-blog.csdnimg.cn/direct/607598e115c7463dbe5f0ee4646faabd.png"><br/> 如果我们写代码的时候，对于有些数据写错了但是又仅仅是失误造成的，这样是不会给我们进行错误提示的，这样就需要我们使用接口了<br/> <img alt="在这里插入图片描述" src="https://img-blog.csdnimg.cn/direct/dae379c8d28c4e5fbdbf0b81f785a98d.png"><br/> 首先我们需要创建一个文件夹并创建index.ts文件，这样创建的好处是引入路径更方便<br/> 接下来我们定义一个接口，目的是为了限制Person对象的具体属性</img></img></p>
<pre><p style='background-color:black;color:white;padding:12px;'>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}
  ]`
  }
</p></pre>
<p>接下来我们进行导入</p>
<pre><p style='background-color:black;color:white;padding:12px;'>  import {type PersonInter} from '@/types'
</p></pre>
<p>同时我们进行定义，目的是让Person符合这个PersonInter接口</p>
<pre><p style='background-color:black;color:white;padding:12px;'>  let person:PersonInter = {id:'1515',name:'馒头',age:22}
</p></pre>
<h2><a id="_68"></a>泛型</h2>
<p>接下来我们定义一个数组</p>
<pre><p style='background-color:black;color:white;padding:12px;'>  let personList = [
    {id:'a',name:'大馒头',age:18},
    {id:'b',name:'中馒头',age:19},
    {id:'c',name:'小馒头',age:20}
  ]
</p></pre>
<p>如果我们想要这个数组也满足规范应该怎么做呢，下面我将展示</p>
<pre><p style='background-color:black;color:white;padding:12px;'>  let personList : Array<PersonInter>= [
    {id:'a',name:'大馒头',age:18},
    {id:'b',name:'中馒头',age:19},
    {id:'c',name:'小馒头',age:20}
  ]
</p></pre>
<p>上面的含义主要是，数组中的每一个都将满足规则<br/> <img alt="在这里插入图片描述" src="https://img-blog.csdnimg.cn/direct/ec9022e1cc4c4c39805214612fce4f8e.png"/></p>
<h2><a id="_91"></a>自定义类型</h2>
<p>在index.ts中定义</p>
<pre><p style='background-color:black;color:white;padding:12px;'>  export type Persons = PersonInter[]
</p></pre>
<p>之后在Person.vue中进行导入即可，同时我们将之前的Array PersonInter修改为我们自定义的Persons就可以了，是不是很方便啊~~~</p>
<pre><p style='background-color:black;color:white;padding:12px;'><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>
</p></pre>
<h2><a id="_129"></a>接口、泛型、自定义相对比</h2>
<p><strong>接口 vs 泛型：</strong></p>
<blockquote>
<p>接口用于描述对象的形状，泛型用于增强代码的灵活性。<br/> 接口在定义对象结构时更为直观，而泛型适用于编写通用的、适用于多种类型的代码。</p>
</blockquote>
<hr/>
<p><strong>泛型 vs 自定义类型：</strong></p>
<blockquote>
<p>泛型用于增强代码的灵活性，而自定义类型用于提高代码的可读性和类型安全性。<br/> 泛型可以用于编写通用的代码，而自定义类型用于定义具体的类型结构。</p>
</blockquote>
<h2><a id="_144"></a>结论</h2>
<blockquote>
<p>在Vue3中，接口、泛型和自定义类型是强大的工具，可以帮助我们编写更加健壮、灵活和可维护的代码。通过合理地使用这些功能，我们可以有效地减少错误，并提高代码的质量和可读性。因此，在开发Vue应用程序时，建议充分利用这些功能来提升开发效率和代码质量</p>
</blockquote>
<p><img alt="请添加图片描述" src="https://img-blog.csdnimg.cn/direct/ff5a4f700ff24c4d8fc4d117f69edd11.png"/></p>
<blockquote>
<p>挑战与创造都是很痛苦的，但是很充实。</p>
</blockquote>
</div>