前言
在前端开发领域,typescript
的运用可谓越来越广,特别是在一些开源框架或第三方工具库中,ts
运用得好,可以给用户提供比较友好的开发提示。但是在项目开发中,对一些对ts
不够了解的人来说,面对密密麻麻的类型,有时也会比较头疼。下面结合ts
中的工具类型,讲一下开发中经常看到且比较容易混淆的几个知识点。
关键词:in、extends、keyof
文末有我帮助500多人拿到前端offer的文章 !!!
一、P in keyof T 和 P in K的区别
1、[P in keyof T]
表示遍历类型 T
的所有属性名 P
进行相关操作,一般是用来遍历对象的属性名。
例:ts工具类型Partial<T>
// 源码
type Partial<T> = {
[P in keyof T]?: T[P];
};
// 示例
type User = { name: string; age: number }
// 把User类型的所有属性变为可选属性
type PartUser = Partial<User>;
// type PartUser = {
// name?: string | undefined;
// age?: number | undefined;
// }
把例子代入源码理解:
第一次遍历User
时,T=User, P=name, T[P]=User[name]=string
;
第二次遍历User
时,T=User, P=age, T[P]=User[age]=number
;
由于属性名后加了?
,所以每个属性都变成了可选类型。
2、[P in K]
表示遍历指定的联合类型 K
中的元素 P
进行相关操作。一般用来遍历联合类型
例: ts工具类型Pick<T>
// 源码
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
// 示例
type User = { name: string; age: number, weight: number }
// 从User类型中挑选`name`和`age`属性组成一个新的类型
type Form = Pick<User, 'name' | 'age'>
// type Form = {
// name: string;
// age: number;
// }
把例子代入源码理解:
已知:T = User, K = 'name' | 'age'
;
第一次遍历K
时,P=name, T[P]=User[name]=string
;
第二次遍历K
时,P=age, T[P]=User[age]=number
综上所述:其实[P in keyof T]
和[P in K]的区别
在于keyof T
和K
,keyof T
的目的就是把对象的属性名变成一个和K
一样的联合, 最后使用in
来遍历联合类型。如:
type User = { name: string; age: number }
// keyof User等价于'name' | 'age'
let key: keyof User
key = 'name';
key = 'age';
key = 'weight'; // 不能将类型“"weight"”分配给类型“keyof User”。
二、 K in keyof T 和 K extends keyof T的区别
由上一点我们已经知道了K in keyof T
一般是用来变量对象的属性名,那么它和K extends keyof T
又有什么区别呢?从主观上看是in
和extends
的区别。
in
: 用于定义映射类型中的键类型;
extends
: 用于定义泛型约束或继承类型;
// 把K类型约束为类型T的属性名一样的联合类型或者其中包含的类型
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
type User = { name: string; age: number }
// keyof User等价于'name' | 'age'
let key: keyof User
type KK = Pick<User, 'name'>;
type KK2 = Pick<User, 'name' | 'age'>;
type KK3 = Pick<User, 'weight'>; // 类型“"weight"”不满足约束“keyof User”。
// 类型“"name" | "age" | "weight"”不满足约束“keyof User”。不能将类型“"weight"”分配给类型“keyof User”。
type KK4 = Pick<User, 'name' | 'age' | 'weight'>;
综上所述:当需要对一个泛型进行约束时,可以选择使用extends
关键字。
三、[P in keyof T]、[P in keyof T]? 和 [P in keyof T]-? 的区别
这个问题其实是讨论?
、-?
和什么都不加的区别
。
[P in keyof T]?
表示将类型 T
的所有属性变为可选的;
// Partial工具类型源码
type Partial<T> = {
[P in keyof T]?: T[P];
};
[P in keyof T]-?
表示将类型 T
的所有属性变为必选的;
// Required工具类型源码
type Required<T> = {
[P in keyof T]-?: T[P];
};
[P in keyof T]
不会对属性的可选性进行修改,保持其原有的可选性。
// 自定义一个copy类型
type CopyType<T> = { [P in keyof T]: T[P] };
但好像这样做没啥意义!
总结
以上主要是要理解in
/extends
/keyof
的运用,了解了这几个关键字的用法,相信也能对你使用typescript
做项目开发会有较大帮助!
偏爱前端的晓羽:称作2024很强的前端面试场景题,成功帮助532人拿到offer
给你们推荐一篇我帮助500+名同学完成改造的文章,希望大家看完以后都可以领取到心仪的offer哦