TypeScript聯(lián)合類型,交叉類型和類型保護(hù)
1.聯(lián)合類型
所謂的聯(lián)合類型就是定義一些類型，定義的變量只需要滿足任意一種類型即可，聯(lián)合類型使用|定義，示例代碼如下：
// 通過 | 符號定義聯(lián)合類型 let value: number | boolean | string = '一碗周' value = 18
在上面的代碼中我們定義了一個value變量，該變量可以是number、boolean或者string類型。
2.交叉類型
介紹了聯(lián)合類型，然后介紹一下與之特別相似的交叉類型。
所謂的交叉類型就是需要滿足所有類型，交叉類型使用&符號定義。
示例代碼如下：
// 定義三個普通接口類型
interface Name {
name: string
}
interface Age {
age: number
}
interface Hobby {
hobby: string
}
// 定義一個對象，該對象為上面三個對象的聯(lián)合類型
let person: Name & Age & Hobby = {
// 如果少分配一個類型將會拋出異常
name: '一碗周',
age: 18,
hobby: 'coding',
}
3.類型保護(hù)
現(xiàn)在我們有一個需求：獲取一個具有任意類型數(shù)組中第一個數(shù)字。
實(shí)現(xiàn)代碼如下：
// 定義一個包含number或者string的數(shù)組
const arr: (number | string)[] = [1, '數(shù)字']
// 遍歷數(shù)組返回第一個數(shù)字
const getValue: (arr: (number | string)[]) => number = (
arr: (number | string)[],
): number => {
for (let i = 0; i < arr.length; i++) {
// 如果當(dāng)前值轉(zhuǎn)換為數(shù)字時候不是一個 NaN 則返回
if (!isNaN(Number(arr[i]))) {
return arr[i] // 不能將類型“string | number”分配給類型“number”。
}
}
}
上述代碼中return時并不知道返回的是不是一個number類型。所以將會拋出異常。
上述功能可以通過類型斷言來完成，示例代碼如下：
const getValue: (arr: (number | string)[]) => number = (
arr: (number | string)[],
): number => {
for (let i = 0; i < arr.length; i++) {
// 如果當(dāng)前值轉(zhuǎn)換為數(shù)字時候不是一個 NaN 則返回
if (!isNaN(Number(arr[i]))) {
return arr[i] as number // 告訴 編譯器 我返回的就是一個 number
}
}
}
什么是類型斷言請參考：類型斷言
如果使用類型斷言來說明，如果想要的數(shù)據(jù)類型不一樣時，就會顯得比較繁瑣。這個時候就需要類型保護(hù)來完成該功能，
類型保護(hù)主要分為以下三種：
3.1自定義類型保護(hù)
自定義類型保護(hù)的方式就是定義一個函數(shù)，該函數(shù)是的返回結(jié)構(gòu)是一個parameterName is type的形式，該形式是一個類型謂詞 。parameterName必須是來自于當(dāng)前函數(shù)參數(shù)里的一個參數(shù)名。
示例代碼如下：
// 使用自定義類型保護(hù)
// 1. 定義一個函數(shù) 其返回值是一個 類型謂詞，即 parameterName is Type 也就是 參數(shù)名 is 類型 的形式
function isNumber(value: number | string): value is number {
// 如果返回 true 則說明 傳入的 value 是 is 后面的type
return !isNaN(Number(value))
}
// 2. 定義一個獲取數(shù)字的函數(shù)
const getNumber: (value: number | string) => number = (
value: number | string,
): number => {
// 如果調(diào)用 isNumber 的值為 true 則說明 value 是一個數(shù)字，所以將數(shù)字返回
if (isNumber(value)) {
return value
}
}
// 3. 調(diào)用獲取最終的數(shù)值
const getValue: (arr: (number | string)[]) => number = (
arr: (number | string)[],
): number => {
for (let i = 0; i < arr.length; i++) {
// 如果返回數(shù)字，轉(zhuǎn)換為 boolean 值為 true
if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
return getNumber(arr[i])
}
}
}
定義第二個函數(shù)的原因是在數(shù)組中直接使用i作為返回值還是有問題的，所以定義一個函數(shù)過渡一下。
3.2typeof 類型保護(hù)
JavaScript 中的typeof關(guān)鍵字可以判斷當(dāng)前類型，但是僅僅只能判斷number、string、boolean和symbol四種類型。
在這個需求中就足夠了，接下來我們看看如何通過typeof來實(shí)現(xiàn)類型保護(hù)。
示例代碼如下：
// 1. 定義一個獲取數(shù)字的函數(shù)
const getNumber: (value: number | string) => number = (
value: number | string,
): number => {
// 判斷當(dāng)前是否為字符串，如果是返回當(dāng)前值
if (typeof value === 'number') {
return value
}
}
// 2. 調(diào)用獲取最終的數(shù)值
const getValue: (arr: (number | string)[]) => number = (
arr: (number | string)[],
): number => {
for (let i = 0; i < arr.length; i++) {
// 如果返回數(shù)字，轉(zhuǎn)換為 boolean 值為 true
if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
return getNumber(arr[i])
}
}
}
3.3instanceof類型保護(hù)
instanceof操作符也是JavaScript中提供的原生操作符，它用來判斷一個實(shí)例是不是某個構(gòu)造函數(shù)創(chuàng)建的，或者是不是使用ES6語法的某個類創(chuàng)建的。在TypeScript中也可以通過instanceof操作符來實(shí)現(xiàn)類型保護(hù)，
示例代碼如下：
/**
* 由于 instanceof 僅僅支持引用類型，不支持原始類型，所以說這里需要進(jìn)行一下改動，將數(shù)組修改為如下：
*/
const arr2: (Number | String)[] = [new String('彼岸繁華'), new Number(10)]
// 1. 定義一個獲取數(shù)字的函數(shù)
const getNumber: (value) => number = (value): number => {
// 判斷當(dāng)前是否為 Number 類型，將當(dāng)前值轉(zhuǎn)換為字符串返回
if (value instanceof Number) {
return Number(value)
}
}
// 2. 調(diào)用獲取最終的數(shù)值
const getValue: (arr: (Number | String)[]) => number = (
arr: (Number | String)[],
): number => {
for (let i = 0; i < arr.length; i++) {
// 如果返回數(shù)字，轉(zhuǎn)換為 boolean 值為 true
if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
return getNumber(arr[i])
}
}
}
使用instanceof時需要注意一下兩點(diǎn)：
- 只適應(yīng)于任何引用類型，不支持原始類型。
- 前者的原型鏈上是否 包含 后者的原型對象。
到此這篇關(guān)于TypeScript聯(lián)合類型,交叉類型和類型保護(hù)的文章就介紹到這了,更多相關(guān)TypeScript聯(lián)合類型.交叉類型,類型保護(hù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄仙Ｕ勗鶭S執(zhí)行環(huán)境與作用域。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
JavaScript使用readAsDataURL讀取圖像文件
這篇文章主要為大家詳細(xì)介紹了JavaScript使用readAsDataURL讀取圖像文件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
impress.js 是國外一位開發(fā)者受 Prezi 啟發(fā)，采用 CSS3 與 JavaScript 語言完成的一個可供開發(fā)者使用的表現(xiàn)層框架(演示工具)。感興趣的朋友跟著小編一起學(xué)習(xí)吧2015-09-09
這篇文章主要介紹了js中如何對url進(jìn)行編碼和解碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
JavaScript 模塊的循環(huán)加載實(shí)現(xiàn)方法
本文介紹JavaScript語言如何處理"循環(huán)加載"。目前，最常見的兩種模塊格式CommonJS和ES6，處理方法是不一樣的，返回的結(jié)果也不一樣2015-12-12
本文主要介紹了圖片懶加載插件，函數(shù)節(jié)流的應(yīng)用以及函數(shù)節(jié)流具體的好處、常用的場景。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
今天小編就為大家分享一篇layer擴(kuò)展打開/關(guān)閉動畫的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這次是更改后的代碼實(shí)現(xiàn)以下功能：去掉了“確定”，“取消”按鈕。變單擊為雙擊事件，用戶按ESC鍵，取消更改感興趣的朋友可以了解下2013-01-01
基于Html+CSS+JS實(shí)現(xiàn)手動放煙花效果
這篇文章主要介紹了利用Html+CSS+JavaScript實(shí)現(xiàn)的放煙花效果，文中一共實(shí)現(xiàn)了兩種方式：手動和自動，文中的示例代碼講解詳細(xì)，感興趣的可以試一試2022-01-01
sort是數(shù)組的一個排序方法。學(xué)習(xí)js的朋友可以參考下。2011-07-07