TS的基本用法//numberletnum=ref(100)//textletstr=rer('text')//booleanletbo=ref(true)//nullletn=ref(null)//undefinedletu=ref(undefined)//nanletna=ref(NaN)//任何类型leta=ref('anytype')数据类型isnotUseunderfixedconditions//联合类型lets=ref('text')//可以同时保存文本和数字//对于数字、布尔值、数组等同样如此lets=ref|boolean>(true)在数组中使用TS//数字数组letnumArr=ref([1,2,3])letnumArr2=ref>([1,2,3])//文字数组letstrArr=ref(['1','2','3'])letstrArr2=ref>(['1','2','3'])//tupleletarr:[string,number,boolean]=['text',1,true]当系统不确定类型是什么，但你知道类型是什么时候//typeinference/*当系统不确定是什么类型，但你知道是什么类型时*///case:通过id获取对应的itemletdata={id:1,name:'东方无敌'}letarr=[{id:1,text:'IntroductiontoArt'},{id:2,text:'强风草'},]arr.find(el=>el.id==data.idasnumber）//或者arr.find(el=>el.id==data.id)vue3的ref和reactive在TS中的应用//refletnum=ref(100)//Number类型letnum2=ref([1,2,3])//数字类型的数组//...等等//reactiveletstr=ref('爆风力草')//字符串类型letstr2=ref(['强风草','一只手'])//字符串类型的数组//...等等Interface?:表示数据可选//通过定义接口来实现类型定义大量数据接口IArr{name:string;年龄：数字；性别：布尔值；address?:'Wuhan'//?:表示数据可选}//内部键名需要跟接口对应，顺序不需要letarr=reactive({name:'风风力草',gender:true,age:100})在实际开发中，数据较多且复杂，处理方法//模拟数组嵌套对象//interfaceinterfaceIArr{name:string;年龄：数字；性别：布尔值；信息：信息；//由接口2使用}//接口2interfaceIInfo{id:numbergoodsName:string;价格：数量；status:boolean;}letarr=reactive({name:'大风草',gender:true,age:100,info:{id:1,goodsName:'Book',price:50,status:true,}})//如果用户有多个info信息，并且是一个数组，那么接口可以写成如下形式：interfaceIArr{name:string;年龄：数字；性别：布尔值；信息：信息[]；//接口2使用}letarr=reactive({name:'大风草',gender:true,age:100,info:[{id:1,goodsName:'Book',price:50,status:true,},{id:2,goodsName:'pen',price:2,status:true,}]})如果变量中有多个变量，且内部变量是数组或对象//可以使用解构方法//interfaceinterfaceIArr{name:string;年龄：数字；性别：布尔值；信息：信息；//由接口2使用}//接口2interfaceIInfo{id:number;商品名称：字符串；价格：数量；status:boolean;}letuser=reactive<{arr:IArr}>{arr:{name:'风草',gender:true,age:100,info:{id:1,goodsName:'Book',price:50,状态：真，}}}//********************************************************//也可以写成下面的形式//这种形式是接口嵌套，通过接口里面的arr规范数据类型interfaceIUser{arr:IArr}//interfaceinterfaceIArr{name:string;年龄：数字；性别：布尔值；细绳;价格：数量；status:boolean;}letuser=reactive{arr:{name:'快风草',gender:true,age:100,info:{id:1,goodsName:'Book',price:50,status:true,}}}接口和数据都提取出来的场景应用到js文件-提取数据接口的ts文件//这里是一个简单的例子，不同的场景其实都是类似的//js文件提取接口IUser{名称：字符串；年龄：数字；性别：布尔值；信息：信息；//接口2使用}//接口2接口IInfo{id:numbergoodsName:string;价格：数量；status:boolean;}exporttype{IUser}js文件import{reactive}from"vue";letuserInfo=reactive({name:'风风草',gender:true,age:100,info:{id:1,goodsName:'book',price:50,status:true}})export{userInfo}相应页面使用//在需要的文件上使用import{IUser}from'使用./config'import{userInfo}from'./data'letuser=reactive<{value:IUser}>({value:userInfo})
