TypeScript函數和型別斷言範例詳解

2022-06-08 22:00:51

開始

現在要加速學習了，大佬們有沒有內推，給個推薦

會vue2/vue3 + ts

斷言

非空斷言

非空斷言就是確定這個變數不是null或者undefined，就是把null或者undefined從他的型別中排除

function demo(message:string|undefined|null) {
    const str: string = message
}
demo(undefined)

此時我們沒有用非空斷言，message的值是undefined和null，所以不能賦值給str，此事執行會報錯（Type 'string | null | undefined' is not assignable to type 'string'.Type 'undefined' is not assignable to type 'string'.）

如果用上非空斷言

let message:string
function demo(message:string|undefined|null) {
    const str: string = message!
}
demo(undefined)

此時程式碼沒有問題

型別斷言

確定此時的變數型別

尖括號

我們可以用尖括號

let message: any = "scc"
let mesLength:number = (<string>message).length

as

as用來判斷變數是不是後面的型別

let message: any = "scc"
let mesLength:number = (message as string).length

確定賦值斷言

這個變數一定會被賦值，就可以使用確定賦值斷言

let message!:string

變數名後面新增一個！就可以

型別守衛

ts型別守衛就是起到一個縮小型別範圍作用

trpeof

typeof關鍵字可以使用===判斷此時的型別是什麼

function demo(message: string | number | boolean) {
    if (typeof message === "string") {
        message.toUpperCase()
    }
}

此時message的型別被縮小成string型別，所以能呼叫toUpperCase方法

道理很簡單，相信有一定基礎的同學很快就會明白

in

in用來判斷變數是否在型別範圍內

interface Person {
    name: string
    age:number
}
interface Dog {
    name: string
    walk:string
}
type x = Dog|Person
function all(emp: x) {
    if ("walk" in emp) {
        console.log(d.walk);
    }
}

函數

可選引數

引數可以設成可選引數，可選引數最好在必填引數和有預設值的引數後面

function demo(num:number,str?:string){
}

預設值引數

function demo(num:number,bol:boolean = true,str?:string){ 
}

bol就是有預設值的引數，如果傳值，那麼值為傳來的值，不傳就是預設值

函數過載

函數過載可以讓函數根據傳值得型別，自動選擇應該執行的函數

function add(a1: number, a2: number):number
function add(a1: string, a2: string):string
function add(a1: any, a2: any):any {
        return a1 + a2
}
console.log(add(20,30));
console.log(add("scc","brd"));