TypeScript学习|TypeScript学习笔记十二（条件类型、内置条件类型）学习|javascript|typescript

【TypeScript学习|TypeScript学习笔记十二（条件类型、内置条件类型）】
目录

一、TS中条件类型是什么？
二、条件类型
- 1.在类型中添加条件分支
- 2.条件类型的分发
- 3.分布式的条件分发
- 4.更多示例
三、内置条件类型
- 1.Exclude
- 2.Extract
- 3.NonNullable
- 4.ReturnType 和 Parameters
- 5.InstanceType 和 ConstructorParameters
四、拓展infer的使用
- 1.tuple转union
- 2，联合类型转成交叉类型
总结

提示：以下是本篇文章正文内容，下面案例可供参考
一、TS中条件类型是什么？

TS中的条件类型就是在类型中添加条件分支，以支持更加灵活的泛型，满足更多的使用场景。内置条件类型是TS内部封装好的一些类型处理，使用起来更加便利。

二、条件类型 1.在类型中添加条件分支代码如下（示例）：

namespace a { interface Fish { name1: string } interface Water { name2: string } interface Bird { name3: string } interface Sky { name4: string }// 1.在类型中添加条件分支，以支持更加灵活的泛型 type Condition = T extends Fish ? Water : Sky; let con1: Condition = { name4: '天空' }; }

2.条件类型的分发

namespace a { interface Fish { name1: string } interface Water { name2: string } interface Bird { name3: string } interface Sky { name4: string } // 2.条件类型的分发 // 因为是联合类型因此会返回Water和Sky两种类型 let con2: Condition = { name2: '' }; let con3: Condition = { name4: '' }; }

3.分布式的条件分发

namespace b { interface Fish { name1: string } interface Water { name2: string } interface Bird { name3: string } interface Sky { name4: string } // 分布式的条件分发 // 找出不包含Fish的部分,下面这三种写法都可以 type Condition = [T] extends [Fish] ? Water : Sky; // type Condition = T[] extends Fish[] ? Water : Sky; // type Condition = {t: T} extends {t: Fish} ? Water : Sky; // 条件类型的分发 // 因为是联合类型找到不包含Fish的部分，因此返回的还是Sky let con2: Condition = { name4: '' }; }

4.更多示例

namespace c { // 找出T中不包含U的部分 type Diff = 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 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' }

三、内置条件类型 1.Exclude

从T中排除掉U，和上面的Diff相同

type Exclude = 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 extends U ? T : never; type R4 = Extract<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R4: 'a' | 'b' | 'c'

3.NonNullable

从T中找出不为null和undefined的参数

type NonNullable = T extends null | undefined ? never : T; type R5 = NonNullable<'a' | null | undefined | 'd'>; // R5: 'a' | 'd'

4.ReturnType 和 Parameters

infer：推断的意思，是一个关键字
ReturnType 获取函数的返回类型
Parameters 获取函数参数类型，返回一个元组

namespace d { // 1.1 // ReturnType 获取函数的返回类型 type ReturnType = T extends (...args: any[]) => infer R ? R : T; function getUser() { return { name: '张三', age: 10 } } // TS可以从参数中推断返回值类型 type ReturnUser = ReturnType; // type ReturnUser = {name: string; age: number; }// 1.2 // Parameters 获取函数参数类型，返回一个元组 type Parameters = T extends (...args: infer P) => any ? P : never; function getPerson(a: string, b: number) { return { name: '李四', age: 18 } } type ParamsType = Parameters; // type ParamsType = [a: string, b: number] }

5.InstanceType 和 ConstructorParameters

InstanceType 获取构造函数的实例类型
ConstructorParameters 获取类的构造函数的参数类型

namespace e { class Person { name: string; constructor(name: string) { this.name = name; } getName() { console.log(this.name); } }// ConstructorParameters 获取类的构造函数的参数类型 type ConstructorParameters any> = T extends abstract new ( ...args: infer P) => any ? P : never; type Params = ConstructorParameters // type Params = [name: string]// InstanceType 获取构造函数的实例类型 type Instance = InstanceType; let instance: Instance = { name: '张三', getName() {} } }

四、拓展infer的使用

示例如下：

1.tuple转union

元组转为联合类型

type ElementOf = T extends Array ? P : never; type Tuple = [string, number]; type TupleToUnion = ElementOf; // type TupleToUnion = string | number

2，联合类型转成交叉类型

string | number =》string & number

type T1 = { name: string }; type T2 = { age: number }; type ToIntersection = 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

总结