乐趣区

关于typescript:TS在实际开发中的使用

jiezi

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})
退出移动版