TypeScript的Keyof类型运算符

前言TypeScript的官方文档已经更新，但我能找到的中文文档还是旧版本。因此，对一些新增和修改的章节进行了翻译和整理。本文整理自TypeScriptHandbook的“KeyofTypeOperator”章节。本文并没有严格按照原文翻译，部分内容也做了说明和补充。keyof类型运算符在对象类型上使用keyof运算符会返回由对象的属性名称组成的字符串或数字文字的并集。本例中的类型P等同于"x"|“y”：类型点={x：数字；y:number};typeP=keyofPoint;//typeP=keyofPoint但是如果这个类型有字符串或者number类型的索引签名，keyof会直接返回这些类型：typeArrayish={[n:number]:未知};typeA=keyofArrayish;//typeA=numbertypeMapish={[k:string]:boolean};typeM=keyofMapish;//typeM=string|number请注意，在此示例中，M是字符串|number，这是因为JavaScript对象的属性名会被转换为字符串，所以obj[0]与obj["0"]相同。（注：原文到此结束）我们在开头也说过，keyof也可能返回一个联合类型的数字字面量。它什么时候返回数字文字的联合类型？我们可以尝试构造这样一个对象：constNumericObject={[1]:"赛余1号",[2]:"赛余2号",[3]:"赛余3号"};typeresult=keyoftypeofNumericObject//typeofNumbericObject的结果是：//{//1:string;//2:string;//3:string;//}//所以最后的结果是：//type结果=1|2|3Symbol其实TypeScript也可以支持符号类型的属性名：constsym1=Symbol();constsym2=符号();constsym3=符号();constsymbolToNumberMap={[sym1]:1,[sym2]:2,[sym3]:3,};typeKS=keyoftypeofsymbolToNumberMap;//sym1类型|类型sym2|typeofsym3这就是为什么我们像下面的例子在泛型中使用它的时候，会报这样的错误：functionuseKey(o:T,k:K){varname:string=k;//输入'字符串|编号|symbol'isnotassignabletotype'string'.}如果确定只使用字符串名称类型的属性，可以这样写：functionuseKey>(o:T,k:K){变量名:字符串=k;//OK}如果你想处理所有属性名，你可以这样写：functionuseKey(o:T,k:K){变量名:字符串|编号|symbol=k;}类和接口对类使用keyof://例1classPerson{name:"决羽"}typeresult=keyofPerson;//typeresult="name"//例2classPerson{[1]:string="醴羽";}typeresult=keyofPerson;//typeresult=1接口使用keyof:interfacePerson{name:"string";}typeresult=keyofPerson;//typeresult="name”在实践中，在《TypeScript'sGeneric》中，我们谈到了一个keyof的应用：我们想要获取一个对象的给定属性name的值。为此，我们需要确保我们不会在obj上获取不存在的属性，因此我们在两种类型之间创建一个约束：functiongetProperty(obj:Type,key:Key){returnobj[key];}letx={a:1,b:2,c:3,d:4};getProperty(x,"a");getProperty(x,"m");//类型'"m"'的参数不可分配给类型'"a"的参数|“乙”|“c”|“d”'。在后面的“MappredTypes”一章中，我们也会讲到keyof。TypeScript系列TypeScript系列文章由官方文档翻译、重点难点解析、实战技巧三部分组成，内容涵盖入门、进阶、实战。旨在为您提供系统的TS学习教程。整个系列预计约有40篇文章。点此浏览全系列文章，建议顺便收藏本站。微信：“mqyqingfeng”，加我到世优唯一的读者群。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。