TypeScript條件類型與內(nèi)置條件類型超詳細講解
更新時間：2023年03月09日 10:50:43 作者：劍九 六千里
我們可以使用TypeScript中的條件類型來根據(jù)邏輯定義某些類型，就像是在編寫代碼那樣。它采用的語法和我們在JavaScript中熟悉的三元運算符很像：condition ? ifConditionTrue : ifConditionFalse。我們來看看他是怎么工作的
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、TS中條件類型是什么
TS中的條件類型就是在類型中添加條件分支，以支持更加靈活的泛型，滿足更多的使用場景。內(nèi)置條件類型是TS內(nèi)部封裝好的一些類型處理，使用起來更加便利。
二、條件類型
1.在類型中添加條件分支
代碼如下（示例）：
namespace a {
interface Fish {
name1: string
}
interface Water {
name2: string
}
interface Bird {
name3: string
}
interface Sky {
name4: string
}
// 1.在類型中添加條件分支，以支持更加靈活的泛型
type Condition<T> = T extends Fish ? Water : Sky;
let con1: Condition<Bird> = { name4: '天空' };
}
2.條件類型的分發(fā)
namespace a {
interface Fish {
name1: string
}
interface Water {
name2: string
}
interface Bird {
name3: string
}
interface Sky {
name4: string
}
// 2.條件類型的分發(fā)
// 因為是聯(lián)合類型因此會返回Water和Sky兩種類型
let con2: Condition<Fish | Bird> = { name2: '' };
let con3: Condition<Fish | Bird> = { name4: '' };
}
3.分布式的條件分發(fā)
namespace b {
interface Fish {
name1: string
}
interface Water {
name2: string
}
interface Bird {
name3: string
}
interface Sky {
name4: string
}
// 分布式的條件分發(fā)
// 找出不包含F(xiàn)ish的部分,下面這三種寫法都可以
type Condition<T> = [T] extends [Fish] ? Water : Sky;
// type Condition<T> = T[] extends Fish[] ? Water : Sky;
// type Condition<T> = {t: T} extends {t: Fish} ? Water : Sky;
// 條件類型的分發(fā)
// 因為是聯(lián)合類型找到不包含F(xiàn)ish的部分，因此返回的還是Sky
let con2: Condition<Fish | Bird> = { name4: '' };
}
4.更多示例
namespace c {
// 找出T中不包含U的部分
type Diff<T, U> = T extends U ? never : T;
type R1 = Diff<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R1: 'd'
// 由于U中的'a','b','c'都是T中的子類型，因此R1的類型就是'd'
// 找出T中包含U的部分
type Filter<T, U> = T extends U ? T : never;
type R2 = Filter<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R2: 'a' | 'b' | 'c'
// 由于U中的'a','b','c'都是T中的子類型，因此R2的類型就是'a' | 'b' | 'c'
}
三、內(nèi)置條件類型
1.Exclude
從T中排除掉U，和上面的Diff相同
type Exclude<T, U> = T extends U ? never : T; type R3 = Exclude<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R3: 'd'
2.Extract
從T中找出包含U的部分，和上面的filter相同
type Extract<T, U> = T extends U ? T : never; type R4 = Extract<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R4: 'a' | 'b' | 'c'
3.NonNullable
從T中找出不為null和undefined的參數(shù)
type NonNullable<T> = T extends null | undefined ? never : T; type R5 = NonNullable<'a' | null | undefined | 'd'>; // R5: 'a' | 'd'
4.ReturnType和Parameters
- infer：推斷的意思，是一個關(guān)鍵字
- ReturnType 獲取函數(shù)的返回類型
- Parameters 獲取函數(shù)參數(shù)類型，返回一個元組
namespace d {
// 1.1
// ReturnType 獲取函數(shù)的返回類型
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : T;
function getUser() {
return {
name: '張三',
age: 10
}
}
// TS可以從參數(shù)中推斷返回值類型
type ReturnUser = ReturnType<typeof getUser>; // type ReturnUser = {name: string;age: number;}
// 1.2
// Parameters 獲取函數(shù)參數(shù)類型，返回一個元組
type Parameters<T> = T extends (...args: infer P) => any ? P : never;
function getPerson(a: string, b: number) {
return {
name: '李四',
age: 18
}
}
type ParamsType = Parameters<typeof getPerson>; // type ParamsType = [a: string, b: number]
}
5.InstanceType和ConstructorParameters
- InstanceType 獲取構(gòu)造函數(shù)的實例類型
- ConstructorParameters 獲取類的構(gòu)造函數(shù)的參數(shù)類型
namespace e {
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
getName() {
console.log(this.name);
}
}
// ConstructorParameters 獲取類的構(gòu)造函數(shù)的參數(shù)類型
type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (
...args: infer P) => any ? P : never;
type Params = ConstructorParameters<typeof Person> // type Params = [name: string]
// InstanceType 獲取構(gòu)造函數(shù)的實例類型
type Instance = InstanceType<typeof Person>;
let instance: Instance = {
name: '張三',
getName() {}
}
}
四、拓展infer的使用
示例如下：
1.tuple轉(zhuǎn)union
元組轉(zhuǎn)為聯(lián)合類型
type ElementOf<T> = T extends Array<infer P> ? P : never; type Tuple = [string, number]; type TupleToUnion = ElementOf<Tuple>; // type TupleToUnion = string | number
2.聯(lián)合類型轉(zhuǎn)成交叉類型
string | number =》string & number
type T1 = { name: string };
type T2 = { age: number };
type ToIntersection<T> = T extends { a: (x: infer U) => void, b: (x: infer U) => void } ? U : never;
// 由于U需要同時滿足T1的定義、T2的定義，因此U需要包含T1、T2所有的類型，因此T3就是T1 & T2
type T3 = ToIntersection<{ a: (x: T1) => void, b: (x: T2) => void }>; // type T3 = T1 & T2
到此這篇關(guān)于TypeScript條件類型與內(nèi)置條件類型超詳細講解的文章就介紹到這了,更多相關(guān)TypeScript條件與內(nèi)置條件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript的null和undefined區(qū)別示例介紹
在Javascript中對于這種生命后沒有給定初始值的變量，就給他一個undefined，如果要將一個標識符聲明稱object類型，但是暫時不給他實例，那么就可以將它先初始化為null2014-09-09
這篇文章主要介紹了Javascript中innerHTML用法,實例分析了實用innerHTML獲取對應(yīng)元素內(nèi)容的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家介紹了JavaScript的節(jié)流與防抖，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
在layer彈層layer.prompt中,修改placeholder的實現(xiàn)方法
今天小編大家分享一篇在layer彈層layer.prompt中,修改placeholder的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果實例分析
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果的方法,以實例形式分析了網(wǎng)上比較常見的實現(xiàn)方法,并對于原理進行分析并加以改進,最后給出了一個具體的應(yīng)用實例供大家參考,需要的朋友可以參考下2014-11-11
這篇文章主要為大家詳細介紹了使用js中的Canvas實現(xiàn)橡皮擦效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
二級域名轉(zhuǎn)向類...2006-11-11
一個按鈕可以在短時間內(nèi)多次點擊，那么有可能會被用戶惡意點擊，下面有個不錯的方法可以有效制止，希望對大家有所幫助2014-03-03
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了JavaScript計算某一天是星期幾的方法,需要的朋友可以參考下2015-08-08