< 返回新闻公共列表
TS在实际开发中的使用
发布时间：2023-06-29 23:00:22
TS的基础使用
// 数字 let num = ref
(100) // 文字 let str = rer('文字') // boolean let bo = ref(true) // null let n = ref(null) // undefined let u = ref(undefined) // nan let na = ref(NaN) // 任意类型 let a = ref('任意类型') // 多个不固定类型 let str = rer('文字') // 可以是字符串也可以是数字
数据类型不固定情况下的使用
// 联合类型 let s = ref('文字') // 既可以保存文字也可以保存数字 // 数字、boolean、数组等同理 let s = ref | boolean>(true)
TS在数组中的使用
// 数字数组 let numArr = ref([1,2,3]) let numArr2 = ref>([1,2,3]) // 文字数组 let strArr = ref(['1','2','3']) let strArr2 = ref>(['1','2','3']) // 元组 let arr : [string,number,boolean] = ['文字', 1 , true]
当系统不确定该类型是什么，但你知道该类型是什么的时候
// 类型推断 /*当系统不确定该类型是什么，但你知道该类型是什么的时候*/ // 案例：通过id来获取对应项 let data = { id:1, name : '东方不败' } let arr = [ {id:1,text:'艺术概论'}, {id:2,text:'疾风劲草'}, ] arr.find(el=>el.id == data.id as number) // 或 arr.find(el=>el.id == data.id)
vue3的ref和reactive在TS中的应用
// ref let num = ref(100) // 数字类型 let num2 = ref([1,2,3]) // 数字类型的数组 // ...依此类推 // reactive let str = ref('疾风劲草') // 字符串类型 let str2 = ref(['疾风劲草','一臂之力']) // 字符串类型的数组 // ...依此类推
接口
?: 表明该数据是可选的
Object类型可以用接口约束
// 通过定义接口来实现对大量数据的类型定义 interface IArr { name : string; age : number; gender : boolean; address ?: '武汉' // ?: 表明该数据是可选的 } // 内部的键名需要跟接口对应上，顺序没有要求 let arr = reactive({ name : '疾风劲草', gender : true, age : 100 })
实际开发中，数据多且杂，处理方法
// 模拟数组嵌套对象 // 接口 interface IArr { name : string; age : number; gender : boolean; info : IInfo; // 接口2使用 } // 接口2 interface IInfo { id : number goodsName : string; price : number; status : boolean; } let arr = reactive({ name : '疾风劲草', gender : true, age : 100, info : { id : 1, goodsName : '书', price : 50, status : true, } }) // 如果该用户有多个info信息，并且是一个数组，那么接口可以写成以下形式： interface IArr { name : string; age : number; gender : boolean; info : IInfo[]; // 接口2使用 } let arr = reactive({ name : '疾风劲草', gender : true, age : 100, info : [ { id : 1, goodsName : '书', price : 50, status : true, }, { id : 2, goodsName : '笔', price : 2, status : true, } ] })
如果变量内有多个变量，且内部的变量是一个数组或者对象
// 可以使用解构的方法 // 接口 interface IArr { name : string; age : number; gender : boolean; info : IInfo; // 接口2使用 } // 接口2 interface IInfo { id : number; goodsName : string; price : number; status : boolean; } let user = reactive<{ arr : IArr }>{ arr : { name : '疾风劲草', gender : true, age : 100, info : { id : 1, goodsName : '书', price : 50, status : true, } } } // ******************************************************* // 你也可以写成下面这种形式 // 该形式是接口嵌套，通过接口内部的arr来规范数据类型 interface IUser { arr : IArr } // 接口 interface IArr { name : string; age : number; gender : boolean; info : IInfo; // 接口2使用 } // 接口2 interface IInfo { id : number; goodsName : string; price : number; status : boolean; } let user = reactive{ arr : { name : '疾风劲草', gender : true, age : 100, info : { id : 1, goodsName : '书', price : 50, status : true, } } }
将接口和数据全都抽离出来的场景应用
ts文件-抽离的数据
接口的ts文件
// 这里举个简单的例子，不同的场景其实都差不多 // ts文件抽离 interface IUser { name : string; age : number; gender : boolean; info : IInfo; // 接口2使用 } // 接口2 interface IInfo { id : number goodsName : string; price : number; status : boolean; } export type { IUser }
数据的ts文件
import { reactive } from "vue"; let userInfo = reactive({ name : '疾风劲草', gender : true, age : 100, info : { id : 1, goodsName : '书', price : 50, status : true } }) export { userInfo }
对应的页面使用
// 在需要使用的文件上使用 import { IUser } from './config' import { userInfo } from './data' let user = reactive<{value : IUser}>({value : userInfo})
