Vue3 從入門到入土(TypeScript數據類型)

數字/字符串/布爾

// 基礎類型
(()=>{
    // let 變量名: 變量類型 = 值
    // 對於已經定義了類型的變量, 可以重複賦值爲相同類型的值, 但是不能賦值爲不同類型

    // bool
    let ok: boolean = true

    // 數字
    // 可以存放四種進制, 但是在打印時都會轉成十進制
    let count0: number = 10  // 十進制
    let count1: number = 0b1010 // 二進制
    let count2: number = 0o12  // 八進制
    let count3: number = 0xa  // 十六進制

    // 字符串類型
    let str0: string = "str0"
    let str1: string = "str1"
    // 字符串 format
    console.log(`${str0}, ${str1}, ${count0}`)

    // 字符串和數字拼接
    console.log(str0+count1)  // str010
})()

undefined/null

 // 基礎類型
(()=>{
    // undefined 和 null 是不同的類型
    // 默認的時候, undefined 和 null 是所有類型的子類型
    let u: undefined = undefined
    let n: null = null
    // 默認情況下, 不能將其他類型的變量賦值爲 undefined 或者 null
})()

數組類型

// 基礎類型
(()=>{
    // 數組類型
    // 數組裏的每個變量類型必須相同, 且符合定義數組時設置的數據類型

    // 數據類型[]
    // number[] 代表一個數組, 裏面的類型爲 number
    let arr0: number[] = [1, 2, 3, 4, 5, 6]
    // 數組類型的另一種定義方法
    // Array<數據類型>
    let arr1: Array<number> = [1, 2, 3]


    // 元組類型
    // 元組可以存儲不同的數據類型, 但是必須在定義時設置好元組的長度和每個的類型

    // [元組0位的類型, 元組1位的類型, ....]
    let arr3: [string, number, boolean] = ["s", 0, false]
})()

枚舉

// 基礎類型
(()=>{
    // 枚舉
    // 枚舉中的每一個數據值都可以叫做元素, 每個元素都有自己的編號, 默認編號從0開始, 依次遞增+1
    enum Color{
        red,  // 0
        green,  // 1
        blue,  // 2
    }
    let color: Color = Color.red  // 0

    // 枚舉可以指定其每個元素的值, 但是必須是 number 類型
    enum Color1{
        red = 100,  // 100
        green,  // 101
        blue,  // 102
    }
    enum Color2{
        red,  // 0
        green = 100,  // 100
        blue,  // 101
    }
    enum Color3{
        red = 1,  // 1
        green = 3,  // 3
        blue = 100,  // 100
    }

    // 從元素拿到值
    console.log(Color2.red)  // 0
    // 從值拿到元素
    console.log(Color2[100])  // green

})()

any

// 基礎類型
(()=>{
    // any
    // any 對應任意類型, 在不確定當前是什麼類似時使用
    // 因爲編譯器並不能確定具體的類型, 所以要慎用 any, any 可能會導致錯誤在運行時才暴露出來
    let str: any = 100
    str = "string"
    str = false

    let arr: any[] = [100, "str", false]
})()

void

// 基礎類型
(()=>{
    // void
    // void 一般在函數沒有返回值時使用, 標識該函數無返回值
    function show():void{
        console.log("func show")
    }
    show()
    // void 與 undefined 
    // void 類型的變量, 可以接受一個 undefined 的值, 一般不使用
    let vd:void = undefined
})()

object

// 基礎類型
(()=>{
    // object
    // object類型
    function getObject(obj:object):object{
        console.log(obj)
        return {
            name: "18",
            age: 19,
        }
    }

    console.log(getObject({
        age: 18,
        name: "text"
    }))
})()

聯合類型/類型斷言

// 基礎類型
(()=>{
    // 聯合類型
    // 類似泛型
    // 聯合類型表示取值爲多種類型中的某一種

    // 定義函數getStr接收參數 str, 類型爲 number 或 string, 返回 string
    function getStr(str:number|string):string{
        return str.toString()  // 將參數轉成 string 類型返回
    }
    console.log(getStr(1))
    console.log(getStr("tttt"))

    // 配合類型斷言使用
    // 類型斷言, 告訴編譯器, 這個變量是什麼類型
    // (<類型>變量) 則代表告訴編譯器, x 是 string 類型
    function getLen(x:number|string):number{
        if ((<string>x).length){   // 只有 string 有.length 方法, 這裏如果沒有, 則是 number 類型
            return (<string>x).length
        }else{  // number 類型 需要 toString 再輸出長度
            return x.toString().length
        }
    }

    // 類型斷言的第2種語法
    // 等同於方法1
    function getLen1(x:number|string):number{
        if ((x as string).length){   // 只有 string 有.length 方法, 這裏如果沒有, 則是 number 類型
            return (x as string).length
        }else{  // number 類型 需要 toString 再輸出長度
            return x.toString().length
        }
    }
})()

類型推斷

// 基礎類型
(()=>{
    // 類型推斷
    // 類型推斷, TS 在沒有明確的自動類型時推測出一個類型, 編譯器自己會進行類型推斷, 自動判斷出變量的類型
    // 當定義變量且賦值時, 會根據值進行推斷類型
    // 當定義變量但是不賦值時, 推斷爲 any 類型
    let t = 100  // 編譯器自己推斷成 number
    let a;  // 自己推斷成 any
})()