vue3?是用typescript實現的, 所以我認為他的原始碼是我們學習tyepscript的最佳實踐, 下面我就用他原始碼中的例項讓大家學會使用typescript的"is"特性.
直達
特別篇, 在vue3?原始碼中學會typescript? - "is"
第六課, 什麼是宣告檔案(declare)? ? - 全域性宣告篇
"is"用在什麼地方?
我先說用在什麼地方, 經常用來封裝"型別判斷函式", 這類函式都必須用"is"特性, 這類函式一般起名都會叫isString/isFood/isVnode等等, 比如:
const isString = (val: any): val is string => typeof val === 'string'
複製程式碼概念
是一種型別推斷表示式的關鍵字, 通過和函式返回值的比較, 從而"縮小"引數的型別範圍.
?看完這句話 "沒明白就對了" , 想理解這句話什麼意思, 請繼續看下面的例子, ?我保證第一個例子過後你就會明白這句話.
vue在哪裡用了"is"
首先教大家一個vscode的小技巧, 搜尋中我們可以按"正則"搜尋, 比如搜尋\): \w+ is我們就可以找到所有使用了"is"特性的程式碼.
更多常用正則看這裡: https://juejin.im/post/5d245d4151882555300feb77
例項解釋
從搜尋到的程式碼中, 我們拿出最有代表性的一個函式說明.
const isString = (val: any): val is string => typeof val === 'string'
複製程式碼劃重點
可以看見在返回值部分返回的不是型別而是一個表示式"val is string", 這段程式碼的意思是當isString返回值為true的時候, 引數val就是string型別.
直接返回boolean不行嗎?
不行! 看下面的程式碼, 我們雖然知道在if判斷後aa一定是string,但是ts不知道, ts會提示aa可能是null型別, 不能執行substring方法.
所以需要使用is特性. ts可以根據 if 判斷推斷出當前的aa為string型別:
更多"is"在vue3中的例項
// 是否是物件
export const isObject = (val: any): val is Record<any, any> =>
val !== null && typeof val === 'object'
// 是否ref物件
export function isRef(v: any): v is Ref {
return v ? v[refSymbol] === true : false
}
// 是否vnode
export function isVNode(value: any): value is VNode {
return value ? value._isVNode === true : false
}
// 是否插槽節點
export const isSlotOutlet = (
node: RootNode | TemplateChildNode
): node is SlotOutletNode =>
node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT
複製程式碼更多例子, 可以在原始碼中搜尋\): \w+ is, 大概有16條類似的程式碼.
通過總結我們發現, "is"主要都是應用在型別判斷函式上, 讓後續邏輯判斷中可以正確的推斷出引數的型別, 好了現在可以在回頭看開頭的解釋"is是一種型別推斷表示式的關鍵字, 通過和函式返回值的比較, 從而"縮小"引數的型別範圍.", 現在是不是已經理解了呢.
練習
我們自己寫一個"判斷是否正規表示式"的函式.
?答案
function isRegExp (input: any): input is RegExp {
return '[object RegExp]' === Object.prototype.toString.call(input);
}
複製程式碼總結
喜歡ts, 如果你也喜歡ts的話可以看我之前寫的ts基礎文章.
平時還請大家多多練習, 祝早日熟練ts, 放2個我用ts寫的專案當做參考, 拋磚引玉, 加油!
✋ 移動/pc端手勢庫, 支援: tap/press/pan/swipe/rotate/pinch github.com/any86/any-t…
? 把vue元件變成this.$xxx這樣的命令 github.com/any86/vue-c…
微信群
感謝大家的閱讀, 如有疑問可以加我微信, 我拉你進入微信群(由於騰訊對微信群的100人限制, 超過100人後必須由群成員拉入)
