TS: 可恶！你还是分不清遍历/继承/约束用法

前言

在前端开发领域，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哦