TypeScript函數(shù)和類(lèi)型斷言實(shí)例詳解
開(kāi)始
現(xiàn)在要加速學(xué)習(xí)了，大佬們有沒(méi)有內(nèi)推，給個(gè)推薦
會(huì)vue2/vue3 + ts
斷言
非空斷言
非空斷言就是確定這個(gè)變量不是null或者undefined，就是把null或者undefined從他的類(lèi)型中排除
function demo(message:string|undefined|null) {
const str: string = message
}
demo(undefined)此時(shí)我們沒(méi)有用非空斷言，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í)代碼沒(méi)有問(wèn)題
類(lèi)型斷言
確定此時(shí)的變量類(lèi)型
尖括號(hào)
我們可以用尖括號(hào)
let message: any = "scc" let mesLength:number = (<string>message).length
as
as用來(lái)判斷變量是不是后面的類(lèi)型
let message: any = "scc" let mesLength:number = (message as string).length
確定賦值斷言
這個(gè)變量一定會(huì)被賦值，就可以使用確定賦值斷言
let message!:string
變量名后面添加一個(gè)！就可以
類(lèi)型守衛(wèi)
ts類(lèi)型守衛(wèi)就是起到一個(gè)縮小類(lèi)型范圍作用
trpeof
typeof關(guān)鍵字可以使用===判斷此時(shí)的類(lèi)型是什么
function demo(message: string | number | boolean) {
if (typeof message === "string") {
message.toUpperCase()
}
}此時(shí)message的類(lèi)型被縮小成string類(lèi)型，所以能調(diào)用toUpperCase方法
道理很簡(jiǎn)單，相信有一定基礎(chǔ)的同學(xué)很快就會(huì)明白
in
in用來(lái)判斷變量是否在類(lèi)型范圍內(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ù)，如果傳值，那么值為傳來(lái)的值，不傳就是默認(rèn)值
函數(shù)重載
函數(shù)重載可以讓函數(shù)根據(jù)傳值得類(lèi)型，自動(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"));
當(dāng)我們傳入不同的值時(shí)，會(huì)返回調(diào)用不同的函數(shù)
結(jié)束
到此這篇關(guān)于TypeScript函數(shù)和類(lèi)型斷言的文章就介紹到這了,更多相關(guān)TS函數(shù)和類(lèi)型斷言?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 使用?TypeScript?開(kāi)發(fā)?React?函數(shù)式組件
- TypeScript?泛型重載函數(shù)的使用方式
- TypeScript防抖節(jié)流函數(shù)示例詳解
- Typescript 實(shí)現(xiàn)函數(shù)重載的方式
- Typescript 函數(shù)重載的實(shí)現(xiàn)
- TypeScript中的函數(shù)
- Typescript中函數(shù)類(lèi)型及示例詳解
- TypeScript使用函數(shù)重載確定返回類(lèi)型的實(shí)現(xiàn)方法
- 如何在TypeScript中使用函數(shù)
- TypeScript中的函數(shù)重載示例分析
- TypeScript中使用回調(diào)函數(shù)的實(shí)現(xiàn)
相關(guān)文章
基于JavaScript+IntersectionObserver實(shí)現(xiàn)高性能圖片懶加載
在 Web 開(kāi)發(fā)中,圖片懶加載是一種常見(jiàn)的優(yōu)化手段,尤其在長(zhǎng)列表頁(yè)面中,按需加載圖片可以顯著提升頁(yè)面性能,本篇文章將通過(guò) JavaScript 和 Intersection Observer,實(shí)現(xiàn)一個(gè)帶有卡片樣式的高性能圖片懶加載示例,需要的朋友可以參考下2025-01-01
聊聊那些使用前端Javascript實(shí)現(xiàn)的機(jī)器學(xué)習(xí)類(lèi)庫(kù)
本文介紹了前端Javascript實(shí)現(xiàn)的機(jī)器學(xué)習(xí)類(lèi)庫(kù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
js操作數(shù)組函數(shù)實(shí)例小結(jié)
這篇文章主要介紹了js操作數(shù)組函數(shù),實(shí)例分析了JavaScript針對(duì)數(shù)組刪除指定元素、去重及刪除指定下標(biāo)元素的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12
JS中的提升機(jī)制變量提升函數(shù)提升實(shí)例詳解
這篇文章主要為大家介紹了JS中的提升機(jī)制變量提升函數(shù)提升實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
如何利用網(wǎng)頁(yè)彈出各種形式的窗口，我想大家大多都是知道些的，但那種多種多樣的彈出式窗口是怎么搞出來(lái)的，平時(shí)利用業(yè)余時(shí)間整理了一些，需要的朋友可以參考一下2012-12-12
微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法
這篇文章主要介紹了小程序自定義modal彈窗封裝實(shí)現(xiàn)方法，本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-06-06
如何用前端html實(shí)現(xiàn)2024煙花效果
這篇文章主要給大家介紹了關(guān)于如何用前端html實(shí)現(xiàn)2024煙花效果的相關(guān)資料,文中介紹的是JavaScript代碼定義了煙花碎片和火箭類(lèi),通過(guò)動(dòng)畫(huà)循環(huán)模擬煙花爆炸效果,需要的朋友可以參考下2024-11-11
箭頭函數(shù)是和我們工作密切相關(guān)的東西，本文主要介紹了js中什么時(shí)候不能使用箭頭函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
開(kāi)發(fā)中常見(jiàn)的組件主要分為公共組件和頁(yè)面組件兩種,因此注冊(cè)組件的方式也分為兩種全局注冊(cè)和局部注冊(cè),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
基于純JS實(shí)現(xiàn)多張圖片的懶加載Lazy過(guò)程解析
這篇文章主要介紹了基于純JS實(shí)現(xiàn)多張圖片的懶加載Lazy過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10