TS的根底应用
// 数字let num = ref<number>(100)// 文字let str = rer<string>('文字')// booleanlet bo = ref<boolean>(true)// nulllet n = ref<null>(null)// undefinedlet u = ref<undefined>(undefined)// nanlet na = ref<NaN>(NaN)// 任意类型let a = ref<any>('任意类型')数据类型不固定状况下的应用
// 联结类型let s = ref<number | string>('文字') // 既能够保留文字也能够保留数字// 数字、boolean、数组等同理let s = ref<number[] | Array<string> | boolean>(true)TS在数组中的应用
// 数字数组let numArr = ref<number[]>([1,2,3])let numArr2 = ref<Array<number>>([1,2,3])// 文字数组let strArr = ref<string[]>(['1','2','3'])let strArr2 = ref<Array<string>>(['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 == <number>data.id)vue3的ref和reactive在TS中的利用
// reflet num = ref<number>(100) // 数字类型let num2 = ref<number[]>([1,2,3]) // 数字类型的数组// ...依此类推// reactivelet str = ref<string>('疾风劲草') // 字符串类型let str2 = ref<string[]>(['疾风劲草','一臂之力']) // 字符串类型的数组// ...依此类推接口
?: 表明该数据是可选的
// 通过定义接口来实现对大量数据的类型定义interface IArr { name : string; age : number; gender : boolean; address ?: '武汉' // ?: 表明该数据是可选的}// 外部的键名须要跟接口对应上，程序没有要求let arr = reactive<IArr>({ name : '疾风劲草', gender : true, age : 100})理论开发中，数据多且杂，解决办法
// 模仿数组嵌套对象// 接口interface IArr { name : string; age : number; gender : boolean; info : IInfo; // 接口2应用 }// 接口2interface IInfo { id : number goodsName : string; price : number; status : boolean;}let arr = reactive<IArr>({ 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<IArr>({ 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应用 }// 接口2interface 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应用 }// 接口2interface IInfo { id : number; goodsName : string; price : number; status : boolean;}let user = reactive<IUser>{ arr : { name : '疾风劲草', gender : true, age : 100, info : { id : 1, goodsName : '书', price : 50, status : true, } }}将接口和数据全都抽离进去的场景利用
js文件-抽离的数据
接口的ts文件
// 这里举个简略的例子，不同的场景其实都差不多// js文件抽离interface IUser { name : string; age : number; gender : boolean; info : IInfo; // 接口2应用 }// 接口2interface IInfo { id : number goodsName : string; price : number; status : boolean;}export type { IUser }数据的js文件
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})