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 str = rer<string | number>('文字')  // 可以是字符串也可以是数字

// 联合类型
let s = ref<number | string>('文字') // 既可以保存文字也可以保存数字
// 数字、boolean、数组等同理
let s = ref<number[] | Array<string> | boolean>(true)

// 数字数组
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)

// 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,
        }
    }
}

// 这里举个简单的例子，不同的场景其实都差不多
// 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 }

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