快捷導(dǎo)航

TypeScript函數(shù)和類型斷言實(shí)例詳解

更新時(shí)間：2022年06月08日 16:35:59 作者：成成請努力

在某些情況下,我們會(huì)比TS更清楚一個(gè)數(shù)據(jù)的類型,這種時(shí)候我們就可以使用斷言來告訴TS相信我,我知道自己在干什么,下面這篇文章主要給大家介紹了關(guān)于TypeScript函數(shù)和類型斷言的相關(guān)資料,需要的朋友可以參考下

開始

現(xiàn)在要加速學(xué)習(xí)了，大佬們有沒有內(nèi)推，給個(gè)推薦

會(huì)vue2/vue3 + ts

斷言

非空斷言

非空斷言就是確定這個(gè)變量不是null或者undefined，就是把null或者undefined從他的類型中排除

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

此時(shí)我們沒有用非空斷言，message的值是undefined和null，所以不能賦值給str，此事運(yùn)行會(huì)報(bào)錯(cuò)（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)

此時(shí)代碼沒有問題

類型斷言

確定此時(shí)的變量類型

尖括號(hào)

我們可以用尖括號(hào)

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

as

as用來判斷變量是不是后面的類型

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

確定賦值斷言

這個(gè)變量一定會(huì)被賦值，就可以使用確定賦值斷言

let message!:string

變量名后面添加一個(gè)！就可以

類型守衛(wèi)

ts類型守衛(wèi)就是起到一個(gè)縮小類型范圍作用

trpeof

typeof關(guān)鍵字可以使用===判斷此時(shí)的類型是什么

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

此時(shí)message的類型被縮小成string類型，所以能調(diào)用toUpperCase方法

道理很簡單，相信有一定基礎(chǔ)的同學(xué)很快就會(huì)明白

in

in用來判斷變量是否在類型范圍內(nèi)

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);
    }
}

函數(shù)

可選參數(shù)

參數(shù)可以設(shè)成可選參數(shù)，可選參數(shù)最好在必填參數(shù)和有默認(rèn)值的參數(shù)后面

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

默認(rèn)值參數(shù)

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

bol就是有默認(rèn)值的參數(shù)，如果傳值，那么值為傳來的值，不傳就是默認(rèn)值

函數(shù)重載

函數(shù)重載可以讓函數(shù)根據(jù)傳值得類型，自動(dòng)選擇應(yīng)該執(zhí)行的函數(shù)

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