您好,登录后才能下订单哦!
这篇文章主要讲解了“TypeScript条件类型与内置条件类型怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“TypeScript条件类型与内置条件类型怎么使用”吧!
TS中的条件类型就是在类型中添加条件分支,以支持更加灵活的泛型,满足更多的使用场景。内置条件类型是TS内部封装好的一些类型处理,使用起来更加便利。
代码如下(示例):
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: '天空' }; }
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: '' }; }
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: '' }; }
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' }
从T中排除掉U,和上面的Diff相同
type Exclude<T, U> = T extends U ? never : T; type R3 = Exclude<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R3: 'd'
从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'
从T中找出不为null和undefined的参数
type NonNullable<T> = T extends null | undefined ? never : T; type R5 = NonNullable<'a' | null | undefined | 'd'>; // R5: 'a' | 'd'
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] }
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() {} } }
示例如下:
元组转为联合类型
type ElementOf<T> = T extends Array<infer P> ? P : never; type Tuple = [string, number]; type TupleToUnion = ElementOf<Tuple>; // type TupleToUnion = string | number
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条件类型与内置条件类型怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。