TS在实际开发中的使用

TS的基础使用

// 数字
let num = ref<number>(100)
// 文字
let str = rer<string>('文字')
// boolean
let bo = ref<boolean>(true)
// null
let n = ref<null>(null)
// undefined
let u = ref<undefined>(undefined)
// nan
let 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中的应用

// ref
let num = ref<number>(100) // 数字类型
let num2 = ref<number[]>([1,2,3]) // 数字类型的数组
// ...依此类推
// reactive
let 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使用
 
}
// 接口2
interface 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使用
 
}
// 接口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<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使用
 
}
// 接口2
interface 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})
作者:兔子先森原文地址:https://segmentfault.com/a/1190000043374553

%s 个评论

要回复文章请先登录注册