TypeScript条件类型与内置条件类型超详细讲解
短信预约 -IT技能 免费直播动态提醒
提示：以下是本篇文章正文内容，下面案例可供参考
一、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> = T extends Fish ? Water : Sky;
let con1: Condition<Bird> = { 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<Fish | Bird> = { name2: '' };
let con3: Condition<Fish | Bird> = { name4: '' };
}
3.分布式的条件分发
namespace b {
interface Fish {
name1: string
}
interface Water {
name2: string
}
interface Bird {
name3: string
}
interface Sky {
name4: string
}
// 分布式的条件分发
// 找出不包含Fish的部分,下面这三种写法都可以
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;
// 条件类型的分发
// 因为是联合类型找到不包含Fish的部分，因此返回的还是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'
}
三、内置条件类型
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的参数
type NonNullable<T> = 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> = T extends (...args: any[]) => infer R ? R : T;
function getUser() {
return {
name: '张三',
age: 10
}
}
// TS可以从参数中推断返回值类型
type ReturnUser = ReturnType<typeof getUser>; // type ReturnUser = {name: string;age: number;}
// 1.2
// Parameters 获取函数参数类型，返回一个元组
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 获取构造函数的实例类型
- ConstructorParameters 获取类的构造函数的参数类型
namespace e {
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
getName() {
console.log(this.name);
}
}
// ConstructorParameters 获取类的构造函数的参数类型
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 获取构造函数的实例类型
type Instance = InstanceType<typeof Person>;
let instance: Instance = {
name: '张三',
getName() {}
}
}
四、拓展infer的使用
示例如下：
1.tuple转union
元组转为联合类型
type ElementOf<T> = T extends Array<infer P> ? P : never;
type Tuple = [string, number];
type TupleToUnion = ElementOf<Tuple>; // type TupleToUnion = string | number
2.联合类型转成交叉类型
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
到此这篇关于TypeScript条件类型与内置条件类型超详细讲解的文章就介绍到这了,更多相关TypeScript条件与内置条件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
