- TypeScript 简介与优势
- TypeScript 安装与使用
- TypeScript 变量声明
- TypeScript 基础类型
- TypeScript BigInt
- TypeScript Symbol
- TypeScript 元组(Tuple)
- TypeScript 枚举(Enum)
- TypeScript Never 与 Unknown
- TypeScript 接口(Interface)
- TypeScript 类(Class)
- TypeScript 函数(Function)
- TypeScript 字面量类型
- TypeScript 类型推断
- TypeScript 类型断言
- TypeScript 类型保护
- TypeScript 泛型(Generic)
- TypeScript 类型兼容性
- TypeScript 交叉类型
- TypeScript 联合类型
- TypeScript 类型别名
- TypeScript 索引类型
- TypeScript 映射类型
- TypeScript 条件类型
- TypeScript is 关键字
- TypeScript infer 关键字
- TypeScript Truthy 与 Falsy
- TypeScript 迭代器(Iterator)
- TypeScript 生成器(Generator)
- TypeScript 装饰器(Decorator)
- TypeScript Reflect Metadata
- TypeScript 混入(Mixins)
- TypeScript 模块
- TypeScript 命名空间
- TypeScript 声明合并
- TypeScript 编译选项
- TypeScript tsconfig.json 配置
- TypeScript TSLint 与 ESLint
TypeScript 条件类型
本节介绍 TypeScript 高级类型中的条件类型(conditional type),条件类型就是在初始状态并不直接确定具体类型,而是通过一定的类型运算得到最终的变量类型。
1. 慕课解释
条件类型用来表达非均匀类型映射,可以根据一个条件表达式来进行类型检测,从两个类型中选出其中一个:
T extends U ? X : Y
语义类似三目运算符:若 T
是 U
的子类型,则类型为 X
,否则类型为 Y
。若无法确定 T
是否为 U
的子类型,则类型为 X | Y
。
2. 示例
declare function f<T extends boolean>(x: T): T extends true ? string : number
const x = f(Math.random() < 0.5) // const x: string | number
const y = f(true) // const y: string
const z = f(false) // const z: number
代码解释:
第 3 行,可以看到在条件不确定的情况下,得到了联合类型 string | number
。
最后两行,条件确定时,得到了具体类型 string
或 number
。
3. 可分配条件类型
在条件类型 T extends U ? X : Y
中,当泛型参数 T
取值为 A | B | C
时,这个条件类型就等价于 (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)
,这就是可分配条件类型。
可分配条件类型(distributive conditional type)中被检查的类型必须是裸类型参数(naked type parameter)。裸类型表示没有被包裹(Wrapped) 的类型,(如:Array<T>
、[T]
、Promise<T>
等都不是裸类型),简而言之裸类型就是未经过任何其他类型修饰或包装的类型。
4. 应用场景
有了这些前置知识,我们就可以分析一下 TypeScript 内置的一些工具类型,就像在映射类型中介绍的可以通过 Partial<T>
,可以在项目中直接使用。
Exclude<T, U>
– 从T
中剔除可以赋值给U
的类型。Extract<T, U>
– 提取T
中可以赋值给U
的类型。NonNullable<T>
– 从T
中剔除 null 和 undefined。ReturnType<T>
– 获取函数返回值类型。InstanceType<T>
– 获取构造函数类型的实例类型。
用第一个来举例分析:
type T00 = Exclude<'a' | 'b' | 'c' | 'd', 'a' | 'c' | 'f'> // 'b' | 'd'
来看一下 Exclude<T, U>
的实现源码:
/**
* Exclude from T those types that are assignable to U
*/
type Exclude<T, U> = T extends U ? never : T;
再看一个进阶的例子,定义一种方法,可以取出接口类型中的函数类型:
type FunctionPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? K : never }[keyof T]
type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>
interface Part {
id: number
name: string
subparts: Part[]
firstFn: (brand: string) => void,
anotherFn: (channel: string) => string
}
type FnNames = FunctionPropertyNames<Part>
type FnProperties = FunctionProperties<Part>
代码解释:
倒数第二行,首先,遍历整个接口,然后通过条件类型判断接口的属性值的类型是否是函数类型,如果是函数类型,取其属性名。得到:
type FnNames = 'firstFn' | 'anotherFn'
倒数第一行,通过上一节介绍的工具函数 Pick,拿到这个接口的所有函数类型成员集合:
type FnProperties = {
firstFn: (brand: string) => void
anotherFn: (channel: string) => string
}
5. 小结
学习到了本节,可以深刻的体会到 TypeScript 中的类型不单单只是简单的给变量进行标注,还可以通过各种运算,得到很多有趣的结果。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论