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

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

2024-10-28 20:10:31 前端知识 前端哥 502 234 我要收藏

上篇文章: 【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>

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19359.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!