TypeScript學(xué)習(xí)筆記之類型縮小
類型縮小
什么是類型縮小呢?
類型縮小的英文是 Type Narrowing;
我們可以通過類似于 typeof padding === "number" 的判斷語句,來改變TypeScript的執(zhí)行路徑;
在給定的執(zhí)行路徑中,我們可以縮小比聲明時更小的類型,這個過程稱之為縮小;
而我們編寫的 typeof padding === "number 語句可以稱之為 類型保護(hù)( type guards);
常見的類型保護(hù)有如下幾種:
- typeof
- 平等縮?。ū热?==、 !==)
- instanceof
- in
- 等等…
我們主要講解typeof、平等縮小、instanceof、in這四種
typeof
在TypeScript中,檢查返回的值typeof是一種類型保護(hù):因為TypeScript對如何typeof操作不同的值進(jìn)行編碼。
例如我們有下面一個常見, 封裝一個函數(shù), 函數(shù)要求傳入?yún)?shù)ID, 傳入的ID有可能是string類型有可能是number類型
當(dāng)傳入的ID是string類型時, 要求將ID的字母全部轉(zhuǎn)為大寫
function printID(id: string|number) { if (typeof id === "string") { console.log(id.toUpperCase()) } else { console.log(id) } } // 測試 printID(123) printID("aaa")
- 上面代碼中, 整個if判斷語句就是類型縮小, 例如當(dāng)代碼進(jìn)入if語句第一個分支時, 一定是string類型, 進(jìn)入第二個分支一定是number類型
- if的判斷語句就稱為類型保護(hù)
平等縮小
我們可以使用Switch或者相等的一些運(yùn)算符來表達(dá)相等性(比如=== , !== , == , and != ):
type Direction = "left" | "right" | "top" | "bottom" function printDirection(direction: Direction) { // 平等類型縮小 switch (direction) { case "left": console.log(direction) break case "right": console.log(direction) break case "top": console.log(direction) break case "bottom": console.log(direction) break default: console.log("調(diào)用默認(rèn)方法") } } // 測試 printDirection("left") printDirection("right") printDirection("top") printDirection("bottom")
instanceof
JavaScript 有一個運(yùn)算符來檢查一個值是否是另一個值的“實例”:
function printTime(time: string|Date) { // 判斷time是否是Date的實例 if (time instanceof Date) { console.log(time.toUTCString()) } else { console.log(time) } } // 測試 printTime("2020-01-02") const date = new Date() printTime(date)
如果不好理解我們可以看下面這個例子
class Teacher { working() { console.log("正在工作") } } class Student { studying() { console.log("正在學(xué)習(xí)") } } function work(p: Student | Teacher) { // 判斷是哪一個實例 if (p instanceof Teacher) { p.working() } else { p.studying() } } // 測試 const stu = new Student() const tec = new Teacher() work(stu) // 正在學(xué)習(xí) work(tec) // 正在工作
in
Javascript 有一個運(yùn)算符,用于確定對象是否具有帶名稱的屬性: in運(yùn)算符
如果指定的屬性在指定的對象或其原型鏈中,則in 運(yùn)算符返回true;
// () => void表示是一個函數(shù)類型 type Dog = {running: () => void} type Fish = {swimming: () => void} function walk(animal: Dog|Fish) { // 判斷函數(shù)是否在animal中 if ("swimming" in animal) { animal.swimming() } else { animal.running() } } // 測試 const dog: Dog = { running() { console.log("狗是跑的") } } const fish: Fish = { swimming() { console.log("魚是游的") } } walk(dog) // 狗是跑的 walk(fish) // 魚是游的
總結(jié)
到此這篇關(guān)于TypeScript類型縮小的文章就介紹到這了,更多相關(guān)TypeScript類型縮小內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Raphael帶文本標(biāo)簽可拖動的圖形實現(xiàn)代碼
Javascript和Raphael順便學(xué)習(xí)了一下,主要是為了實現(xiàn)一個可拖動的矩形同時矩形上還得顯示標(biāo)簽,網(wǎng)上關(guān)于這方面的知識提的很是于是本人自不量力寫了一下,感興趣的你可不要錯過了哈,希望可以幫助到你2013-02-02基于JavaScript實現(xiàn)帶數(shù)據(jù)驗證和復(fù)選框的表單提交
這篇文章主要介紹了基于JavaScript實現(xiàn)帶數(shù)據(jù)驗證和復(fù)選框的表單提交功能,需要的朋友可以參考下2017-08-08怎么選擇Javascript框架(Javascript Framework)
如果你正面臨這樣的問題,希望下面的幾個建議對你在選擇javascript框架上會有所幫助2013-11-11