【TypeScript】入门

使用vue3 搭建

npm create vite 选择 typescript

例：

{
    let age: number = 18
    age = 2
    console.log(age)
    let username: string = '六六'
    let arr: number[] = [1,2,2]
    arr.map(e => {
        e.toString()
    })

    let arr2: Array<number> = [1,2,3,4]
    // 数组内 数字跟字符串
    type ArrType = (number | string)[]
    // let arrALL: (number | string)[] = [1,'1']
    let arrALL: ArrType = [1,'1']
    
    // let time: number = -1
    // time = setTimeout(()=> {}, 1000)

    let time: number | null = null
    time = setTimeout(()=> {}, 1000)


    type funType = ( a: number, b: number ) => number
    let sun: funType = (a, b) => {
        return a-b
    }
    sun(2,1)
    // function add2(a: number, b: number): string {
    //     return (a + b )
    // }
    let num = (name: string, age?: number) => {
        console.log(name)
        console.log(age)
    }
    num('s')

    type objType = { 
        name: string,
        age: number,
        gander: string,
        fun: (content: string) => void,
        isTrue?: boolean
        // fun(content: string): void
    }

    let obj: objType = {
        name: '',
        age: 1,
        gander: '',
        fun (content) {
            console.log(content)
        }
    }
    console.log(obj)
    let obj2: objType = {
        name: '',
        age: 1,
        gander: '',
        fun: (content) => {
            console.log(content)
        }
    }
    obj2.fun('12')

    interface Ip {
        age: number
        name?: string
    }
    let p1: Ip = {
        age: 1
    }
    // 继承
    interface Ip2 extends Ip {
        ol: string
    }
    let p2: Ip2 = {
        age: 1,
        ol: '2'
    }
    console.log(p1.age)
    console.log(p2.age)

    type s1 = {
        sleep: ()=> void
    }
    // 类似继承 既要又要
    type s2 = {
        sleep1: ()=> void,
    } & s1
     // 或者
     type s3 = {
        sleep1: ()=> void,
    } | s1

    // 元组 限制类型 数据长度
    let position: [number, number] = [1,2]

    // 字面量
    type dirType  = '上' | '下'
    function dirFun (dir: dirType) {
        console.log(dir)
    }
    dirFun('上')

    // 枚举 默认从0开始 可设置值列：100
    enum Dirtion {
        top = 100,
        bottom,
        left,
        right
    }
    function change (dir: Dirtion) {
        console.log(dir)
    }
    change(Dirtion.bottom)

    // 类型断言 as

    let a = document.getElementById('lin k') as HTMLAnchorElement

    // 泛型 变量T 也可T1  声明<T>  使用'val: T  调用时传入泛型值
    type objTypes = { name: string, age: number}
    function getId<T>(val: T) {
        return val
    }
    getId<number>(1)
    getId<string>('1')
    getId<[objTypes]>([{name: '1', age: 2}])
    getId<number[]>([1,2])

    // 泛型约束 指定泛型
    function getIds<T>(val: T[]) {
        console.log(val.length)
        return val
    } 
    getIds([1,2])

    interface Ilength { length: number}
    function getIds2<T extends Ilength>(val: T) {
        console.log(val.length)
        return val
    } 
    getIds2<string>('3')

    function getProp <O, K extends keyof O> (obj: O, key: K) {
        return obj[key]
    }
    getProp({name: '1'}, 'name')

    // 泛型接口
    interface Stu<T> {
        name: T
        id: number
    }

    let s: Stu<string> = {
        name: '1',
        id: 1
    }
}