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})