TypeScript中的聯(lián)合類型使用示例詳解
一. TS類型系統(tǒng)有哪些運算
聯(lián)合類型，以下是具體的例子，理解成集合的并集
type?A1?=?number;
type?B1?=?string;
type?C1?=?A1?|?B1;
const?c1:?C1?=?42;
//?這種可以理解成集合的并集，但是他們沒有交集
type?A2?=?{?name:?string?};
//?這里要理解成?A2表示name為string的所有對象，比如{name:?'a',?age:?14},?它既可以有age也可以沒age
type?B2?=?{?age:?number?};
type?C2?=?A2?|?B2;
const?c2:?C2?=?{
??name:?'John',
??age:?18,
};
//?這種可以理解成兩個集合的并集，并且他們有交集二. 如何使用聯(lián)合類型?
用的時候必須拆開，不然只能用number和string同時擁有的方法或者屬性
這種縮小類型范圍的過程我們叫做類型收窄(narrowing)
const?f1?=?(a:?number?|?string)?=>?{
??if?(typeof?a?===?'number')?{
????a.toFixed();
??}?else?{
????a.split(',');
??}
};三. typeof的局限性
typeof 作用于數(shù)組對象，普通對象，日期對象，null都是返回object
四. 使用instanceof來區(qū)分類型
const?f1?=?(a:?Date?|?Date[])?=>?{
??if?(a?instanceof?Date)?{
????a;
??}?else?{
????a;
??}
};五. instanceof的缺點
不支持string,number,boolean等基本類型
我們可以將instanceof 和 typeof結(jié)合解決這個問題
const?f1?=?(a:?Date?|?string?|?Date[])?=>?{
??if?(typeof?a?===?'string')?{
????a;
??}?else?if?(a?instanceof?Date)?{
????a;
??}?else?{
????a;
??}
};不支持TS獨有的類型，也就是那些會被擦除的類型
用in解決，但是這個方案也只能解決部分問題，比如無法區(qū)分兩個函數(shù)
type?Person?=?{
??name:?string;
};
type?Animal?=?{
??x:?string;
};
const?f1?=?(a:?Person?|?Animal)?=>?{
??if('name'?in?a)?{
????a
??}?else?if?('x'?in?a)?{
????a
??}?else?{
????a
??}
}ts官方文檔上也介紹了一些收窄類型的方案
六. ts中的區(qū)分類型方法
以上所講都是根據(jù)js中的方式來區(qū)分類型，接下來我們討論下ts中的類型區(qū)分方法
類型謂詞/類型判斷 is, is的優(yōu)點支持所有ts類型，is的缺點麻煩。
type?Rect?=?{
??height:?number;
??width:?number;
};
type?Circle?=?{
??center:?[number,?number];
??radius:?number;
};
const?f1?=?(a:?Rect?|?Circle)?=>?{
??if?(isRect(a))?{
????a;
??}
};
//?這里x?is?Rect就是類型謂詞,用于收窄類型，寫boolean不行，因為這里寫boolean的話ts不知道boolean的含義是什么
function?isRect(x:?Rect?|?Circle):?x?is?Rect?{
??return?'height'?in?x?&&?'width'?in?x;
}使用可辨別聯(lián)合類型，加字段來表示，好處讓復雜類型的收窄變成簡單類型的對比
- 可以使用這種方式的條件 T = A | B | C | D ...
A,B,C,D...有相同屬性kind或其它
kind的類型是簡單類型
各類型中的kind可區(qū)分
總結(jié): 我們需要一個同名，可辨別的簡單類型的key，這樣的T類型我們稱為可辨別聯(lián)合類型
type?Circle?=?{?kind:?'Circle';?center:?[number,?number]?};
type?Square?=?{?kind:?'Square';?sideLength:?number?};
//?兩個聯(lián)合起來的類型通過加上kind字段來進行判斷類型
type?Shape?=?Circle?|?Square;
const?f1?=?(a:?string?|?number?|?Shape)?=>?{
??if?(typeof?a?===?'string')?{
????a;
??}?else?if?(typeof?a?===?'number')?{
????a;
??}?else?if?(a.kind?===?'Circle')?{
????a;
??}?else?{
????a;
??}
};補充一個使用可辨別聯(lián)合類型的場景
在react中我們會經(jīng)常這樣寫，比如對一個用戶增刪改查
type?Action?=
??|?{?type:?'getUser';?id:?string?}
??|?{?type:?'createUser';?attributes:?any?}
??|?{?type:?'deleteUser';?id:?string?}
??|?{?type:?'updateUser';?attributes:?any?};
使用斷言
type?Circle?=?{?kind:?'Circle';?center:?[number,?number]?};
type?Square?=?{?kind:?'Square';?x:?number?};
type?Shape?=?Circle?|?Square;
const?f1?=?(a:?Shape)?=>?{
??(a?as?Circle).center;?//?這就是斷言
};
f1({?kind:?'Circle',?center:?[1,?2]?});七. any是否是所有類型(除了never/unknown/any/void)的聯(lián)合?為什么?
不是，因為一旦兩個類型聯(lián)合起來，只能用此兩個類型共有的方法，而any可以使用所有類型的方法
const?f1?=?(a:?number?|?string)?=>?{
??a.toFixed();?//?會報錯
??a.split();?//?會報錯
??a.toString();?//?只能用number和string共有的方法
};
const?f2?=?(a:?any)?=>?{
??a.toFixed();?//?不會報錯
??a.split();?//?不會報錯
};any有點像法外狂徒，ts絕大部分規(guī)則對any不生效
const?f1?=?(a:?any)?=>?{
??const?b:?never?=?a;?//?會報錯，這算是any唯一不能違反的規(guī)則
};那么什么是所有類型(除了never/unknown/any/void)的聯(lián)合
unknown，因為unknown可以收窄到任何類型，也就是說它是任何類型的聯(lián)合
const?f1?=?(a:?unknown)?=>?{
?if(a?instanceof?Date)?{
???a?//?Date
?}
?if(isPerson(a))?{
???a?//?Person
?}
}以上就是TypeScript中的聯(lián)合類型使用示例詳解的詳細內(nèi)容，更多關(guān)于TypeScript聯(lián)合類型的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了TypeScript判斷對稱的二叉樹方案實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了TypeScript中的函數(shù)重載示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
開發(fā)typescript項目tsconfig.json配置及選項使用解析
這篇文章主要為大家介紹了tsconfig.json配置及選項使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了Typescript裝飾器AOP示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了TypeScript類型級別和值級別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實現(xiàn)示例解析
這篇文章主要介紹了Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實現(xiàn)示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-08-08
TypeScript使用noImplicitAny實戰(zhàn)解析
這篇文章主要為大家介紹了TypeScript使用noImplicitAny實戰(zhàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要為大家介紹了基于tsup打包TypeScript實現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
高級前端面試手寫扁平數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)Tree
這篇文章主要為大家介紹了高級前端面試手寫扁平數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)Tree示例代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
靜態(tài)類型的typescript與傳統(tǒng)動態(tài)弱類型語言javascript不同，在執(zhí)行前會先編譯成javascript，因為它強大的type類型系統(tǒng)加持，能讓我們在編寫代碼時增加更多嚴謹?shù)南拗?。注意，它并不是一門全新的語言，所以并沒有增加額外的學習成本2022-12-12