文章目录
- 基本用法
- 泛型工具类型
- 索引查询类型
基本用法
- 映射类型 : 基于旧类型创建新类型(对象类型),减少重复,提升开发效率。
- 注意:映射类型只能在类型别名中使用,不能在接口中使用。
用法1: 根据联合类型创建新类型
// 类型 ProKeys 有x/y/z,另一个类型Type1中也有x/y/z,并且Type1中的x/y/z类型相同
type ProKeys = 'x' | 'y' | 'z';// 现在这种书写方式相当于x/y/z重复书写了两次。
type Type1 = {x: number; y:number; z:number}
- 上面这种情况就可以使用映射类型来进行简化:
type ProKeys = 'x' | 'y' | 'z';
type Type2 = {[Key in ProKeys]:number}
- 分析:
1. 映射类型是基于索引签名类型的,所以该语法也使用了 []
2. Key in ProKeys 表示 Key 可以是PorKeys 联合类型中的任意一个
3. 使用映射类型创建的新对象 Type2 和 Type1 结构完全相同
用法2: 根据对象类型创建新类型
type Props = {a: number; b: string; c: boolean};
type Type3 = {[key in keyof Props]: number}
// 相当于
type Type3 = {a: number; b: number; c: number};
- 分析:
1. 首先,先执行 keyof Props 获取对象类型 Props所有建的联合类型('a'|'b'|'c')
2. 然后,key in ...就表示Key可以是Props中所有的键名称中的任意一个。
泛型工具类型
实际上,泛型工具类型(比如:
Partial<Type>
)都是基于映射类型实现的
Partial<Type>
的实现:
type Partial<T> = {[P in keyof T]?:T[P];
}type Props = {a: number; b: string; c: boolean};
type PartialProps = Partial<Props>
- 分析:
1. keyof T 即 keyof Props 表示获取 Props的所有键,也就是:'a'|'b'|'c'
2. 在 [] 后面添加 ?(问号),表示将这些属性变为可选的,以此来实现Partial的功能
3. 冒号后面的T[P]表示获取T中每个键对应的类型,比如:a 对应的 是 number
4. 最终,新类型 PartialProps 和旧类型 Props 结构完全相同,只是让所有类型都变成可选了。
索引查询类型
T[P]
语法,在TS中叫做索引查询(访问)类型,用于查询属性的类型。
type Props = {a: number; b: string; c: boolean};
type TypeA = Props['a'];
// 相当于
type TypeA = number;
Props['a']
表示查询类型 Props 中属性 a 对应的类型 number。- 注意:
[]
中的属性必须存在于被查询类型中,否则就会报错。
索引查询类型也可以同时查询多个索引的类型
type Props = {a: number; b: string; c: boolean};// 使用字符串字面量的联合类型,获取属性 a 和 b 对应的类型
type TypeA = Props['a' | 'b']; // string | number// 使用 keyof 操作符获取 Props 中所有键对应的类型
type TypeA = Props[keyof Props]; // string | number | boolean