TS内置工具类型中的keyof运算符有什么用？

上图中的Partial、Required、Record、Pick工具类型你用过吗？这些工具类型内部都使用了keyof操作符，那么这个操作符的作用是什么呢？如果你不清楚，看完这篇也许你就会明白这期的内容。在JavaScript中，我们可以使用Object.keys方法来获取对象中的键，它返回一个键数组。constuser={id:666,name:"Arbo",}constkeys=Object.keys(user);//["id","name"]在TypeScript中，我们处理的是类型。如果要获取对象类型中的key，需要使用keyof操作符。该运算符在TypeScript2.1中引入，用于获取返回类型为联合类型的类型中的所有键。输入User={id:number;名称：字符串；}类型UserKeys=keyofUser；//“身份”|"name"获取到对象类型的key后，我们就可以通过类似于属性访问的语法来访问对应key值的类型。typeU1=User["id"]//numbertypeU2=User["id"|“名称”]//字符串|numbertypeU3=User[keyofUser]//字符串|number那么在实际工作中，keyof运算符有什么用呢？这里我们举个例子。这是一个简单的getProperty函数，接收obj和key两个参数，获取obj对象上key参数对应的属性值。functiongetProperty(obj,key){returnobj[key];}constuser={id:666,name:"阿宝哥",}constuserName=getProperty(user,"name");那么在TS中如何定义上面的getProperty函数呢？这里我们直接将函数复制到TS工程中。对于以上代码，TS编译器会提示如下错误信息：Theparameter"obj"implicitlyhastype"any"。ts(7006)参数“key”隐式具有类型“any”。ts(7006)此消息告诉我们obj和key参数隐式具有类型“any”。为了解决这个问题，我们可以显式定义obj和key参数的类型。函数getProperty(obj:object,key:string){returnobj[key];//设置Error}后参数上的错误消息消失，但函数体中出现新的错误消息：元素隐式具有“任何”类型，因为“字符串”类型的表达式不能与索引类型“{}”。在类型“{}”上找不到参数类型为“字符串”的索引签名。ts(7053)那么如何解决以上问题呢？这时候我们可以使用TS泛型和这个问题的keyof操作符：functiongetProperty(obj:T,key:K){returnobj[key];}我们定义了两个类型变量T和K，对于类型变量T，使用extends来约束类型变量对应的实际类型必须是对象类型的子类型。类型变量K也使用extends约束类型变量对应的实际类型为对象类型所有键组成的联合类型的子类型。之后，使用getProperty函数，我们可以获取指定属性的值。当key对应的属性不存在时，TS会提示相应的错误。constuserId=getProperty(用户,"id");//好的constuserName=getProperty(user,"name");//好的constuserAge=getProperty(user,"age");//Errorkeyof运算符不仅可以应用于对象类型，还可以应用于原始数据类型，任何类型、类和枚举类型。键入K1=keyof布尔值；//"valueOf"typeK2=keyofnumber;//"字符串"|“固定”|“到指数”|“精度”|“价值”|“toLocaleString”类型K3=keyofany;//字符串|编号|symbolclassPerson{id:number=666;name:string="Abaoge";}typeP=keyofPerson;//“身份”|"name"enumHttpMethod{Get,Post,}typeMethod=keyoftypeofHttpMethod;//“Get”的另一种常见用法|“Post”keyof运算符是映射类型。关于映射类型的相关知识点，阿宝哥会在后面的文章中单独介绍。看完这篇文章，你应该知道keyof运算符在TS内置工具类型中的作用了。