条件类型
1. 条件类型
条件类型有助于描述输入和输出类型之间的关系
1.1 条件类型语法
条件类型就是根据一个条件表达式来进行类型检测, 类似于三目运算符
// 语法
T extends U ? X: Y
若 T 是 U 的子类型，则类型为 X，否则类型为 Y。若无法确定 T 是否为 U 的子类型，则类型为 X | Y。
例如:
// 接口
interface Person {
name: string
age: number
}
// 扩展接口
interface Student extends Person{
classId: string
}
// 根据Student是不是继承Person接口来判断返回string类型还是number类型
type Example = Student extends Person ? string : number
// type Example = string
type Example2 = RegExp extends Person ? string : number
// type Example2 = number
示例中,根据接口Student 是否继承Person接口,来决定类型别名Example 具体是string 类型还是number类型
如不是判断类型的子类型,则返回联合类型
例如:
type Person<Type> = Type extends boolean ? string : number
type StringOrNumber = Person<any>
// type StringOrNumber = string | number
代码解释: 泛型Person在使用时传入了any, any类型可是任何类型, 如果是boolean, 则返回string类型, 如果不是boolean,则返回number类型, 此时TypeScript就不好抉择了, 直接返回string | number的联合类型
1.2 条件类型与泛型一起使用
条件类型可能不会立即有用, 但是条件类型的强大之处在于他们和泛型一起使用
例如,我们采用以下createLabel功能
// 定义id接口
interface IdLabel{
id: number
}
// 定义name接口
interface NameLabel {
name: string
}
// 定义重载更具入参决定返回类型
function createLabel(id:number):IdLabel;
function createLabel(name:string):NameLabel;
function createLabel(nameOrId:string | number):NameLabel | IdLabel;
function createLabel(nameOrId:string | number):NameLabel | IdLabel{
if(typeof nameOrId === 'string'){
return {name:nameOrId}
}else{
return {id:nameOrId}
}
}
createLabel的这些重载描述了一个JavaScript函数, 该函数根据其输入的类型进行选择
请注意:示例中我们必须创建三个重载, 一个用于确定的每种情况(string 或者 number)类型, 一个用于最一般的情况(string | number)联合类型
相反的,我们可以将该逻辑编写为条件类型
type NameOrId<T extends number | string> = T extends number ? IdLabel : NameLabel
首先确定的泛型类型T限定必须继承number | string, 然后在根据传入的泛型更详细的是否extends继承number类型
,如果为true 则返回IdLabel接口, 否则返回NameLabel接口
此时我们就可以使用该条件类型将重载简化为没有重载的单个函数
例如:
function createLabel<T extends string | number>(nameOrId:T):NameOrId<T>{
throw "unimplemented";
}
const namelabel = createLabel('hello')
// const namelabel: NameLabel
const idlabel = createLabel(10)
// const idlabel: IdLabel
const nameidlabel = createLabel(Math.random() > 0.5 ? 'hello' : 42)
// const nameidlabel: NameLabel | IdLabel
2. 条件类型约束
通常, 条件类型的检查会为我们提供一些新信息, 就像使用类型保护缩小类型范围, 可以给我们提供一个更具体的类型一样.
条件类型的真正分支将会进一步限制我们检查类型的泛型
2.1 泛型继承约束
例如.让我们采取以下措施
type MessageOf<T> = T['message']
// 报错: message 无法用于索引类型T
在例子中, TypeScript出错的原因在于T类型不知道有一个message的属性.
因此我们可以通过extends约束以下T类型, 这样TypeScript就不会在抱怨了
也就是说泛型的传入必须满足具有message属性
例如:
type MessageOf<T extends {message: unknown}> = T['message']
interface Email {
message: string
}
type EmailMessage = MessageOf<Email>
// type EmailMessage = string
但是,这样的约束会带来另外一个问题, 那就是MessageOf类型不能使用没有message属性的类型,例如
interface Dog{
name: string
}
type DogMessage = MessageOf<Dog>
// 报错: 类型Dog 不满足约束 {message:unknown}
// 类型Dog 缺少`message`属性, 但是类型{message:unknown} 需要该属性
那么如果我们想MessageOf采用任何类型, 并且在message属性不可用时, 默认为never, 那该怎么办呢
2.2 条件约束
我们可以尝试移出约束,并使用条件类型来做到这一点
type MessageOf<T> = T extends {message: unknown } ? T['message'] : never;
interface Email {
message: string
}
interface Dog{
name: string
}
type EmailMessage = MessageOf<Email>
// type EmailMessage = string
type DogMessage = MessageOf<Dog>
// type DogMessage = never
在条件为true的分支中,TypeScript知道T类型会有一个message属性, 为false的分支中直接返回never类型
作为另外一个示例, 我们还可以编写一个名为Flatten的类型别名, 用于将数组类型展平, 获取数组元素的类型,如果不是数组类型则不理, 传入什么类型返回什么类型
type Flatten<T> = T extends any[] ? T[number] : T
type Str = Flatten<string[]>
// type Str = string
type Num = Flatten<number>
// type Num = number
示例中, 当Flatten 给定一个数组类型是, 它会通过索引访问number来获取string[]的元素类型. 并返回
如果给定的不是数组类型, 则返回给定的类型
3. 在条件类型中推断
条件类型为我们提供了一种方法就是使用infer关键字来推断我们在真实分支中类型,
例如:我们可以推断数组元素的类型,而不是像之前一样使用索引访问类型, 并手动的获取 元素类型
type Flatten<T> = T extends Array<infer Item> ? Item : T
在这里,我们使用了infer关键字声明性地引入了一个新的泛型类型变量Item, 而不是在条件在条件为true的分支中通过索引访问数组元素的类型. 这使我们不必考虑如何挖掘和探索我们感兴趣的类型结构
也可以使用infer关键字编写一些有用的辅助类型别名,
例如,对于简单的情况,我们可以从函数类型中提取返回类型:
// 获取函数返回类型
type GetReturnType<T> = T extends (...arg:never[]) => infer Return ? Return : never
type Num = GetReturnType<() => number>
// type Num = number
type Str = GetReturnType<(x:string) => string>
// type Str = string
type Bool = GetReturnType<(a:boolean, b:boolean) => boolean[]>
// type Bool = boolean[]
4. 分布式条件类型
当条件类型作用于泛型时, 它们给定联合类型时变得可分配
例如,采用如下措施
type ToArray<Type> = Type extends any ? Type[] : never;
如果我们将联合类型插入ToArray，那么条件类型将应用于该联合的每个成员。
type ToArray<Type> = Type extends any ? Type[] : never;
type StrArrOrNumArr = ToArray<string | number>;
// type StrArrOrNumArr = string[] | number[]
这里发生的情况是StrArrOrNumArr分布在：
string | number;
并将联合的每个成员类型映射到有效的内容：
ToArray<string> | ToArray<number>;
这给我们留下了：
string[] | number[];
通常，分配性是期望的行为。extends为避免这种行为，您可以用方括号将关键字的每一侧括起来。
type ToArrayNonDist<Type> = [Type] extends [any] ? Type[] : never;
// 'StrArrOrNumArr' is no longer a union.
type StrArrOrNumArr = ToArrayNonDist<string | number>;
type StrArrOrNumArr = (string | number)[]
网友评论