当前位置: 首页 > 科技观察

听说你很熟悉Pick,那就手写一个MyPick吧!

时间:2023-03-15 00:20:00 科技观察

你用过TypeScript内置的Pick工具类型吗?想知道内部是怎么实现的吗?本期宝哥带大家一起写一个MyPick工具类型。阅读本文后,您将能够了解该工具类型涉及的相关知识点。你准备好了吗?现在让我们言归正传。这是一个Pick函数,它的作用是在keys属性数组中选择每个key对应的值,组成一个新的对象。函数Pick(obj,keys){constret={};for(constkeyofkeys){ret[key]=obj[key];}returnret;}constuser={id:666,姓名:"阿宝哥",地址:"厦门",};constPickedUser=MyPick(user,["id","name"]);在JavaScript中,我们对对象进行操作,但在TypeScript中,我们对类型进行操作。同样,在TypeScript中我们也可以将User类型转换为只包含id和name属性的PickedUser类型。输入User={id:number;名称:字符串;地址:字符串;};类型PickedUser={id:数字;名称:字符串;};要实现以上功能,我们需要使用TypeScript提供的映射类型。它是一种通用类型,可用于将原始对象类型映射到新的对象类型。映射类型的语法如下:{[PinK]:T}其中PinK类似于JavaScript中的for...in语句,用于遍历K类型中的所有类型,而T类型变量用于表示任何类型的。了解了这些知识之后,我们来定义一个MyPick工具类型。输入MyPick={[PinK]:T[P];};上面代码中,T和K称为类型参数,类似于Pick函数中的参数。keyof运算符用于获取某个类型的所有键,其返回类型为联合类型。如果keyof操作对象类型,其功能类似于Object.keys方法。而KextendskeyofT是一个泛型约束,用于约束类型参数K对应的实际类型为该对象类型的所有键组成的联合类型的子类型。T[P]用于获取T类型中P属性对应的类型,其中类型变量P的值在遍历过程中会不断变化。接下来我们验证一下MyPick工具类型是否实现了相应的功能。在实际工作中,如果遇到相应的场景,我们可以直接使用TypeScript提供的Pick工具类型。输入PickedUser=MyPick;//typePickedUser={//id:number;//name:string;//}TypeScript中的映射类型非常重要,如果想了解更多映射类型,可以看《使用TS映射》类型,同事直呼专家!