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

泛型的使用场景:

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

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

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

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

html 复制代码
<script lang="ts"" setup name="TsPerson">

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

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

接口约束

现在我们定义一个接口:

目录在src/types/index.ts

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

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

XML 复制代码
<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接口类型的数据数组

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

XML 复制代码
<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否则,在另一个文件中不能引入该类型

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

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

export type PersonArray = Array<PersonInterface>

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

在文件中进行引入:

XML 复制代码
<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目录,例如

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

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

,但是下面是等价的!

java 复制代码
@import "/src/Css/divBox.css"; 
@import "../../Css/divBox.css"

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

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

html 复制代码
<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>

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

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

html 复制代码
<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>

查看,提示很清晰,:

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript