TypeScript聯合類型,交叉類型和類型保護
1.聯合類型
所謂的聯合類型就是定義一些類型,定義的變量隻需要滿足任意一種類型即可,聯合類型使用|定義,示例代碼如下:
// 通過 | 符號定義聯合類型 let value: number | boolean | string = '一碗周' value = 18
在上面的代碼中我們定義瞭一個value變量,該變量可以是number、boolean或者string類型。
2.交叉類型
介紹瞭聯合類型,然後介紹一下與之特別相似的交叉類型。
所謂的交叉類型就是需要滿足所有類型,交叉類型使用&符號定義。
示例代碼如下:
// 定義三個普通接口類型 interface Name { name: string } interface Age { age: number } interface Hobby { hobby: string } // 定義一個對象,該對象為上面三個對象的聯合類型 let person: Name & Age & Hobby = { // 如果少分配一個類型將會拋出異常 name: '一碗周', age: 18, hobby: 'coding', }
3.類型保護
現在我們有一個需求:獲取一個具有任意類型數組中第一個數字。
實現代碼如下:
// 定義一個包含number或者string的數組 const arr: (number | string)[] = [1, '數字'] // 遍歷數組返回第一個數字 const getValue: (arr: (number | string)[]) => number = ( arr: (number | string)[], ): number => { for (let i = 0; i < arr.length; i++) { // 如果當前值轉換為數字時候不是一個 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++) { // 如果當前值轉換為數字時候不是一個 NaN 則返回 if (!isNaN(Number(arr[i]))) { return arr[i] as number // 告訴 編譯器 我返回的就是一個 number } } }
什麼是類型斷言請參考:類型斷言
如果使用類型斷言來說明,如果想要的數據類型不一樣時,就會顯得比較繁瑣。這個時候就需要類型保護來完成該功能,
類型保護主要分為以下三種:
3.1自定義類型保護
自定義類型保護的方式就是定義一個函數,該函數是的返回結構是一個parameterName is type
的形式,該形式是一個類型謂詞 。parameterName
必須是來自於當前函數參數裡的一個參數名。
示例代碼如下:
// 使用自定義類型保護 // 1. 定義一個函數 其返回值是一個 類型謂詞,即 parameterName is Type 也就是 參數名 is 類型 的形式 function isNumber(value: number | string): value is number { // 如果返回 true 則說明 傳入的 value 是 is 後面的type return !isNaN(Number(value)) } // 2. 定義一個獲取數字的函數 const getNumber: (value: number | string) => number = ( value: number | string, ): number => { // 如果調用 isNumber 的值為 true 則說明 value 是一個數字,所以將數字返回 if (isNumber(value)) { return value } } // 3. 調用獲取最終的數值 const getValue: (arr: (number | string)[]) => number = ( arr: (number | string)[], ): number => { for (let i = 0; i < arr.length; i++) { // 如果返回數字,轉換為 boolean 值為 true if (getNumber(arr[i]) || getNumber(arr[i]) === 0) { return getNumber(arr[i]) } } }
定義第二個函數的原因是在數組中直接使用i作為返回值還是有問題的,所以定義一個函數過渡一下。
3.2typeof 類型保護
JavaScript
中的typeof關鍵字可以判斷當前類型,但是僅僅隻能判斷number
、string
、boolean
和symbol
四種類型。
在這個需求中就足夠瞭,接下來我們看看如何通過typeof
來實現類型保護。
示例代碼如下:
// 1. 定義一個獲取數字的函數 const getNumber: (value: number | string) => number = ( value: number | string, ): number => { // 判斷當前是否為字符串,如果是返回當前值 if (typeof value === 'number') { return value } } // 2. 調用獲取最終的數值 const getValue: (arr: (number | string)[]) => number = ( arr: (number | string)[], ): number => { for (let i = 0; i < arr.length; i++) { // 如果返回數字,轉換為 boolean 值為 true if (getNumber(arr[i]) || getNumber(arr[i]) === 0) { return getNumber(arr[i]) } } }
3.3instanceof類型保護
instanceof
操作符也是JavaScript
中提供的原生操作符,它用來判斷一個實例是不是某個構造函數創建的,或者是不是使用ES6語法的某個類創建的。在TypeScript中也可以通過instanceof
操作符來實現類型保護,
示例代碼如下:
/** * 由於 instanceof 僅僅支持引用類型,不支持原始類型,所以說這裡需要進行一下改動,將數組修改為如下: */ const arr2: (Number | String)[] = [new String('彼岸繁華'), new Number(10)] // 1. 定義一個獲取數字的函數 const getNumber: (value) => number = (value): number => { // 判斷當前是否為 Number 類型,將當前值轉換為字符串返回 if (value instanceof Number) { return Number(value) } } // 2. 調用獲取最終的數值 const getValue: (arr: (Number | String)[]) => number = ( arr: (Number | String)[], ): number => { for (let i = 0; i < arr.length; i++) { // 如果返回數字,轉換為 boolean 值為 true if (getNumber(arr[i]) || getNumber(arr[i]) === 0) { return getNumber(arr[i]) } } }
使用instanceof時需要註意一下兩點:
- 隻適應於任何引用類型,不支持原始類型。
- 前者的原型鏈上是否 包含 後者的原型對象。
到此這篇關於TypeScript聯合類型,交叉類型和類型保護的文章就介紹到這瞭,更多相關TypeScript聯合類型.交叉類型,類型保護內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- typescript快速上手的基礎知識篇
- TypeScript基礎類型介紹
- 關於JS數據類型檢測的多種方式總結
- TypeScript基本類型之typeof和keyof詳解
- TypeScript中正確使用interface和type的方法實例