TS在实际开发中的使用
2024-09-08 16:55:06
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})
最新文章
- BZOJ3197 & 组合乱搞
- DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装
- 给 admin 新建的 hdfs 文件的权限
- Light OJ 1031---Easy Game(区间DP)
- HTML5 LocalStorage 本地存储，刷新值还在
- 与子域名共用session信息
- Android布局－－－相对布局
- 智能家居DIY
- Cocos2d-x 3.2 Lua演示样本CocosDenshionTest（音频测试）
- Coco2d-x android win7 Python 游戏开发环境的搭建
- 关于volatile的可见性和禁止指令重排序的疑惑
- Python练习28
- 学习Spring必学的Java基础知识(1)----反射
- 计蒜客NOIP2017提高组模拟赛（五）day1-展览
- scrapy模拟用户登录
- mysql报错Multi-statement transaction required more than 'max_binlog_cache_size' bytes of storage
- 翻译:探索GLSL-用几何着色器(着色器库)实现法线可视化
- Solr搭建真实项目
- win32 MSG 值
- AMQP && MQTT comparision