网站建设实践鉴定,建立企业网站流程,写软文是什么意思,网站建设需要具备哪些知识条件类型
TS中的条件类型就是在类型中添加条件分支#xff0c;以支持更加灵活的泛型#xff0c;满足更多的使用场景。内置条件类型是TS内部封装好的一些类型处理#xff0c;使用起来更加便利。
一、基本用法
当T类型可以赋值给U类型时#xff0c;则返回X类型#xff0c…条件类型
TS中的条件类型就是在类型中添加条件分支以支持更加灵活的泛型满足更多的使用场景。内置条件类型是TS内部封装好的一些类型处理使用起来更加便利。
一、基本用法
当T类型可以赋值给U类型时则返回X类型否则返回Y类型。
T extends U ? X : YT U X Y 四个是占位符分别表示四种类型T extends U表示T类型能被赋值给U类型这里还涉及到TS类型兼容性。
这个表达式的意思是如果 T 可以赋值给 U 类型则是 X 类型否则是 Y 类型。来看个实际例子
T的具体类型返回不同类型的字符串也就是字面量类型
type TypeNameT T extends string ? string :T extends number ? number :T extends boolean ? boolean :T extends undefined ? undefined :T extends Function ? function :object;type A TypeName1 //string
type B TypeName1 //number
type C TypeNametrue //blolean
type D TypeNameundefined //undefined
type E TypeName()void //function
type F TypeName{} //object T为联合类型时 :
type G TypeName1 1 true // string | number | boolean
type H TypeName()void | {} // function | object根据类型参数判断返回类型
二、分布式条件类型
什么样的条件类型称为分布式条件类型呢
答案是条件类型里待检查的类型必须是裸类型naked type parameter
1. 什么类型是裸类型
裸类型是指类型参数没有被包装在其他类型里,比如没有被数组、元组、函数、Promise等等包裹简而言之裸类型就是未经过任何其他类型修饰或包装的类型。
当分布式条件类型中被检查类型为联合类型则在运算过程中分解多个分支 。
type typeNameT T extends number ? X : Y ;
type H typeNamestring | number // X | Y//上面typeName在计算类型时会分解为如下
type H string extends number ? X : Y number extends number ? X : Y X | Y// 裸类型参数,没有被任何其他类型包裹即T
type NakedTypeT T extends boolean ? YES : NO
// 类型参数被包裹的在元组内即[T]
type WrappedTypeT [T] extends [boolean] ? YES : NO;2. 分布式如何理解
分布式条件类型在实例化时会自动分发成联合类型
什么意思呢
T extends U ? X : Y使用类型参数A | B | C 实例化 T 解析为 (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)
结合 乘法分配律 理解一下
接下来结合具体实例我们来看一下分布式条件类型 与 不含有分布式特性的条件类型 // 裸类型参数,没有被任何其他类型包裹即Ttype NakedTypeT T extends boolean ? YES : NO;// 类型参数被包裹的在元组内即[T]type WrappedTypeT [T] extends [boolean] ? YES : NO;// 含有分布式特性的待检查类型必须为”裸类型“type Distributed NakedTypenumber | boolean; // NakedTypenumber | NakedTypeboolean NO | YES结合一下乘法分配律便于理解与记忆哦~// 不含有分布式特性的待检查的类型为包装或修饰过的类型type NotDistributed WrappedTypenumber | boolean; // NO搞明白了分布式条件类型我们编写这样一个类型工具 NonNullable 即从类型 T 中排除 null 和 undefined 我们期待的结果如下
type a NonNullablestring | number | undefined | null // 得到type a string | number借助条件类型可以很容易写出来
type NonNullableT T extends null | undefined ? never : T注意never 类型表示不会是任何值即什么都没有
三、非分布式条件类型
当T被数组、元组、Promise等包裹时则运算过程中不会分解成多个分支则该条件类型为非分布式条件类型。
type WrappedTupleT [T] extends [boolean] ? X : Y;
type WrappedArrayT T[] extends boolean[] ? X : Y;
type WrappedPromiseT PromiseT extends Promiseboolean ? X : Y;
type G WrappedTuplestring | boolean; // Y
type K WrappedArraystring | boolean; // Y
type L WrappedPromisestring | boolean; // Y解析
//由于计算数据时不会分解成多个分支// [T] extends [boolean]
//WrappedTuplestring | boolean 中 string | boolean 不是 boolean 类型也不是其他原始类型//T[] extends boolean[]
//WrappedArraystring | boolean 中 string | boolean 不是 boolean 类型也不是其他原始类型//PromiseT extends Promiseboolean
//WrappedPromisestring | boolean 中 string | boolean 不是 boolean 类型也不是其他原始类型四、结合泛型使用
1. 过滤出公共类型
在联合类型T中过滤出联合类型U中的成员过滤出来的成员则组成新的类型。下面例子中如果类型T为类型U的子类型则返回类型T否则返回never
type FilterT, U T extends U ? T : never;
type B Filtera | b | c, a | c | d ; // a | c2. 类型删除
在联合类型T中删除联合类型U中的成员T类型中的剩余成员则组成新的类型。下面例子中如果类型T为类型U的子类型则返回never否则返回类型T
type DiffT, U T extends U ? never : T;
type A Diffa | b | c, a | c | d; // b五、结合 infer 关键字
1. 根据类型参数判断返回类型
案例一
条件类型提供一个infer关键字用来推断类型我们先来看个例子。我们想定义一个条件类型如果传入的类型是一个数组则返回它元素的类型如果是一个普通类型则直接返回这个类型。来看下不使用 infer 的话怎么写
type TypeT T extends any[] ? T[number] : T;
type test Typestring[]; // test的类型为string
type test2 Typestring; // test2的类型为string这个例子中如果传入 Type 的是一个数组类型那么返回的类型为T[number]也就是该数组的元素类型如果不是数组则直接返回这个类型。这里我们是自己通过索引访问类型T[number]来获取类型的如果使用 infer 关键字则无需自己手动获取我们来看下怎么使用 infer
type TypeT T extends Arrayinfer U ? U : T;
type test Typestring[]; // test的类型为string
type test2 Typestring; // test2的类型为string这里 infer 能够推断出 U 的类型并且供后面使用你可以理解为这里定义了一个变量 U 来接收数组元素的类型。
案例二
type ReturnTypeT T extends (...args: any[]) infer R ? R : never;const foo (): string {return hello;
}const bar (): number {return 42;
}const str: ReturnTypetypeof foo hello; // string
const num: ReturnTypetypeof bar 42; // number在这个例子中我们定义了一个 ReturnType 类型它接受一个泛型类型参数 T。这个类型参数代表一个函数类型我们通过 T extends (…args: any[]) infer R 这个条件语句来判断 T 是否是一个函数类型并提取其返回值类型 R。如果 T 是一个函数类型则返回 R 类型否则返回 never 类型。
然后我们定义了两个函数 foo 和 bar分别返回字符串和数字。我们使用 typeof 操作符来获取这两个函数的类型并通过 ReturnType 和 ReturnType 来获取它们的返回类型。
最后我们声明了两个变量 str 和 num并分别将它们声明为 ReturnType 和 ReturnType 类型。这样就可以根据不同的函数类型来确定返回类型。
案例三 type IsOptionalT T extends { [k: string]: infer U } ? undefined extends U ? true : false : never;interface Person {name: string;age?: number;
}const person1: Person { name: Alice };
const person2: Person { name: Bob, age: 30 };const isOptional1: IsOptionaltypeof person1 true; // true
const isOptional2: IsOptionaltypeof person2 true; // false在这个例子中我们定义了一个 IsOptional 类型它接受一个泛型类型参数 T。这个类型参数代表一个对象类型我们通过 T extends { [k: string]: infer U } 这个条件语句来判断 T 是否是一个对象类型并提取其属性类型 U。然后我们再使用 undefined extends U ? true : false 来判断属性类型 U 是否包含 undefined如果包含则返回 true否则返回 false。最后如果 T 是一个对象类型则返回 true 或 false 类型否则返回 never 类型。
然后我们定义了一个 Person 接口它包含一个必须属性 name 和一个可选属性 age。我们声明了两个变量 person1 和 person2分别表示一个只有必须属性的 Person 对象和一个同时包含必须属性和可选属性的 Person 对象。
最后我们使用 IsOptional 和 IsOptional 分别获取这两个对象的属性是否可选并将它们声明为 true 或 false 类型。这样就可以根据对象类型的属性是否可选来确定返回类型。
2. 根据条件类型判断函数参数类型
案例一
type FunctionReturnTypeT T extends (...args: any[]) infer R ? R : never;定义了FunctionReturnType条件类型它会检查类型T是否为函数类型如果是则通过infer获取函数的返回值类型R否则返回never类型。具体案例如下
type FRT1 FunctionReturnType() number //numbertype FRT2 FunctionReturnType(x: string, y: number) string[] //stringtype FRT3 FunctionReturnType() void//voidtype FRT4 FunctionReturnType() {}//{}type FRT5 FunctionReturnType1//never案例二 type ArgumentTypeT T extends (arg: infer U) any ? U : never;const foo (arg: string) {return arg.toUpperCase();
}const str: ArgumentTypetypeof foo hello; // string在这个例子中我们定义了一个 ArgumentType 类型它接受一个泛型类型参数 T。这个类型参数代表一个函数类型我们通过 T extends (arg: infer U) any 这个条件语句来判断 T 是否是一个函数类型并提取其参数类型 U。如果 T 是一个函数类型则返回参数类型 U否则返回 never 类型。
然后我们定义了一个 foo 函数它接受一个字符串类型的参数并将其转换为大写字母。我们使用 typeof 操作符来获取 foo 函数的类型并通过 ArgumentType 来获取其参数类型。
案例三
下面的示例演示在协变位置上同一类型变量的多个候选类型将会被推断为联合类型
type FooT T extends { a: infer U, b: infer U } ? U : never;
type t1 Foo{ a: string, b: string }; // string
type t2 Foo{ a: string, b: number }; // string | number同样在逆变位置上同一类型变量的多个候选类型将会被推断为交叉类型
type BarT T extends { a: (x: infer U) void, b: (x: infer U) void } ? U : never;
type t1 Bar{ a: (x: string) void, b: (x: string) void }; // string
type t2 Bar{ a: (x: string) void, b: (x: number) void }; // string number协变与逆变
3. 根据类型的属性来判断函数的返回类型
假设我们有一个名为 fetchData 的函数它从服务器获取数据并将其解析为特定类型。我们希望函数的返回类型根据请求的不同而有所区别因此我们可以使用条件类型来实现这一点。
interface User {name: string;age: number;
}interface Post {title: string;content: string;
}type RequestType user | post;const fetchData T extends RequestType(type: T): T extends user ? User : Post {// 根据请求类型获取不同的数据if (type user) {return { name: John, age: 30 } as any;} else {return { title: TypeScript is awesome, content: ... } as any;}
}const user fetchData(user); // User 类型
const post fetchData(post); // Post 类型在这个例子中我们定义了一个名为 fetchData的函数它接受一个泛型类型参数 T这个类型参数代表请求的类型可以是 user 或 post。我们使用条件类型 T extends “user” ? User : Post 来决定返回的类型如果请求的类型是 user则返回 User 类型否则返回 Post 类型。
然后我们在函数体中根据请求类型获取不同的数据返回的类型也会根据请求类型发生变化。
最后我们分别调用 fetchData函数并将其返回值分别赋值给 user 和 post 变量这样就可以根据请求类型获取不同的数据并且保证返回类型的正确性。
4. 根据类型的成员来判断其他类型
假设我们有一个名为 HasName 的类型它表示一个具有 name 属性的类型。我们希望定义一个名为 PickWithName 的类型它接受一个泛型类型参数 T并从中选择具有 name 属性的子类型。
interface User {name: string;age: number;
}interface Post {title: string;content: string;
}type HasName { name: string };type PickWithNameT T extends HasName ? T : never;type UserWithName PickWithNameUser; // User 类型
type PostWithName PickWithNamePost; // never 类型在这个例子中我们定义了一个 HasName类型它代表具有 name属性的类型。然后我们定义了一个名为 PickWithName 的类型它接受一个泛型类型参数 T并使用条件类型 T extends HasName ? T : never 来判断 T 是否具有 name属性如果是则返回 T否则返回 never 类型。
最后我们分别使用 PickWithName 类型别名 PickWithName 来选择具有 name属性的子类型并将其分别赋值给 UserWithName 和 PostWithName 变量。
5. 根据类型的可选属性来添加或删除属性修饰符
假设我们有一个名为 Person 的类型它有两个属性 name 和 age其中 name 属性是必需的而 age 属性是可选的。我们希望定义一个名为 MakeFieldsOptional 的类型它接受一个泛型类型参数 T并将 T 中所有可选属性的修饰符从必需改为可选将所有必需属性的修饰符保持不变。
type Person {name: string;age?: number;
};type MakeFieldsOptionalT {[P in keyof T]?: T[P];
};type OptionalPerson MakeFieldsOptionalPerson; // { name?: string; age?: number; }在这个例子中我们首先定义了一个 Person 类型它有一个必需的 name 属性和一个可选的 age 属性。
然后我们定义了一个名为 MakeFieldsOptional 的类型它使用映射类型 [P in keyof T]?: T[P]将 T 中所有可选属性的修饰符从必需改为可选将所有必需属性的修饰符保持不变。
最后我们使用 MakeFieldsOptional 类型别名来将 Person 类型中所有可选属性的修饰符从必需改为可选将其赋值给 OptionalPerson 变量。
6. 元组转为联合类型 tuple转union
[string, number] - string | number
type ElementOfT T extends Arrayinfer P ? P : never;
type Tuple [string, number];
type TupleToUnion ElementOfTuple; // type TupleToUnion string | number7. 联合类型转成交叉类型
string | number - string number
type T1 { name: string };
type T2 { age: number };
type ToIntersectionT 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重点
U extends any 是具有分布式有条件类型特性因为待检查类型 U 为裸类型(U extends any ? (k: U) void : never) extends ((k: infer I) void) 最后一个 extends 前面作为待检查类型因为被函数包装因此不具有分布式有条件类型特性 type UnionToIntersectionU ((k: string) void | (k: number) void) extends ((k: infer I) void) ? I : never;根据 逆变特性 推断出的 I 应该具备 string 和 number 的类型故为交叉类型 string number而该交叉类型在 vscode 中表现为 never
六、结合keyof关键字
1. 获取对象属性类型
keyof主要是获取某个对象/类型的属性名来构成新类型。我们可以使用条件类型和 keyof 关键字来获取对象的属性。具体案例如下
type PropertyTypeT, K extends keyof T K extends keyof T ? T[K] : never;上面代码定义了类型为PropertyTypeT, K extends keyof T通过检查K是否是T的一个属性名如果是则返回该属性类型否则返回never。
type Obj { a: string; b: number };
type A PropertyTypeObj, a; // string
type B PropertyTypeObj, c; // never2. 实现映射类型
映射类型是泛型类型的一种可用于把原有的对象类型映射成新的对象类型。我们可以使用条件类型和 keyof关键字来实现Partial类型Partial类型是TS工具类之一。具体案例如下
type PartialT {[K in keyof T]? : T[K]
}定义类型Partial遍历T中所有属性然后通过?将所有属性变成可选属性。
type obj {a:string,b:number}
type R Partialobj//{a?:string,b?:number}注意Partial是TS的工具类所以声明Partial是会报错的可以换个标识符名称。
七、内置条件类型 // 找出T中不包含U的部分type DiffT, U T extends U ? never : T;type R1 Diffa | b | c | d, a | b | c; // R1: d// 由于U中的a,b,c都是T中的子类型因此R1的类型就是d// 找出T中包含U的部分type FilterT, U T extends U ? T : never;type R2 Filtera | b | c | d, a | b | c; // R2: a | b | c1. Exclude
从T中排除掉U和上面的Diff相同
type ExcludeT, U T extends U ? never : T;
type R3 Excludea | b | c | d, a | b | c; // R3: d2. Extract
从T中找出包含U的部分和上面的filter相同
type ExtractT, U T extends U ? T : never;
type R4 Extracta | b | c | d, a | b | c; // R4: a | b | c3. NonNullable
从T中找出不为null和undefined的参数
type NonNullableT T extends null | undefined ? never : T;
type R5 NonNullablea | null | undefined | d; // R5: a | d4. ReturnType 和 Parameters
infer推断的意思是一个关键字ReturnType 获取函数的返回类型Parameters 获取函数参数类型返回一个元组 // 1.1// ReturnType 获取函数的返回类型type ReturnTypeT T extends (...args: any[]) infer R ? R : T;function getUser() {return {name: 张三,age: 10}}// TS可以从参数中推断返回值类型type ReturnUser ReturnTypetypeof getUser; // type ReturnUser {name: string;age: number;}// 1.2// Parameters 获取函数参数类型返回一个元组type ParametersT T extends (...args: infer P) any ? P : never;function getPerson(a: string, b: number) {return {name: 李四,age: 18}}type ParamsType Parameterstypeof 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 ConstructorParametersT extends abstract new (...args: any) any T extends abstract new (...args: infer P) any ? P : never;type Params ConstructorParameterstypeof Person // type Params [name: string]// InstanceType 获取构造函数的实例类型type Instance InstanceTypetypeof Person;let instance: Instance {name: 张三,getName() {}}
}
