TypeScript函數和類型斷言實例詳解

Posted on by

開始

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

會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"));

當我們傳入不同的值時，會返回調用不同的函數

結束

到此這篇關於TypeScript函數和類型斷言的文章就介紹到這瞭,更多相關TS函數和類型斷言內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：