泛型的使用场景：
当我们定义了一个对象时，在多次传值的过程中，其对象中的属性值被更改了，以至于后期拿不到我们需要的数据。
举个例子，当我们使用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> 查看，提示很清晰，：
