当前位置: 首页 > Web前端 > HTML5

IndexedAccessTypes

时间:2023-04-05 21:36:34 HTML5

ofTypeScriptPrefaceTypeScript的官方文档已经更新,但我能找到的中文文档还是旧版本。因此,对一些新增和修改的章节进行了翻译和整理。本文整理自TypeScriptHandbook中的“IndexedAccessTypes”一章。本文并没有严格按照原文翻译,部分内容也做了说明和补充。Text我们可以使用索引访问类型来查找另一个类型的特定属性:typePerson={age:number;名称:字符串;活着:布尔值};typeAge=Person["age"];//typeAge=number因为索引名称本身就是一个类型,所以我们也可以使用union、keyof或者其他类型:typeI1=Person["age"|“姓名”];//类型I1=字符串|numbertypeI2=Person[keyofPerson];//typeI2=string|编号|布尔类型AliveOrName="活着"|"姓名";typeI3=Person[AliveOrName];//类型I3=字符串|boolean如果你试图找到一个不存在的属性,TypeScript会报错:typeI1=Person["alve"];//Property'alve'doesnotexistontype'Person'.接下来是另一个例子,我们使用number来获取数组元素的类型。结合typeof,方便捕获数组字面量的元素类型:constMyArray=[{name:"Alice",age:15},{name:"Bob",age:23},{name:"Eve",年龄:38},];类型Person=typeofMyArray[number];//typePerson={//name:string;//age:number;//}typeAge=typeofMyArray[number]["age"];//typeAge=number//或typeAge2=Person["age"];//typeAge2=number只能按类型索引,这意味着你不能使用const创建变量引用:constkey="age";typeAge=Person[key];//类型'key'不能用作索引类型。//'key'指的是值,但在这里用作类型。您指的是'typeofkey'吗?但是您可以使用类型别名来实现类似的重构:typekey="age";输入年龄=人[键];最后是一个实际案例:假设有一个业务场景,一个页面在不同的APP中使用,比如淘宝、天猫、支付宝,根据不同的APP,调用的底层API会有所不同,我们可以这样写:constAPP=['淘宝','天猫','支付宝'];functiongetPhoto(app:string){//...}getPhoto('淘宝');//okgetPhoto('随便');//ok如果我们只限制app为字符串类型,即使传入其他字符串也不会报错,我们可以使用字面联合类型来约束:constAPP=['TaoBao','Tmall','支付宝'];输入app='淘宝'|'天猫'|'支付宝';functiongetPhoto(app:app){//...}getPhoto('淘宝');//okgetPhoto('随便');//不行但是写Twice有点多余,我们如何从一个数组中获取其所有值的字符串联合类型呢?我们可以结合上一篇文章的typeof和本节的内容:constAPP=['淘宝','天猫','支付宝']asconst;typeapp=typeofAPP[number];//typeapp="淘宝”|“天猫”|"支付宝"functiongetPhoto(app:app){//...}getPhoto('淘宝');//okgetPhoto('随便');//不行我们一步步来分析:第一种是用asconst把数组变成只读元组类型:constAPP=['淘宝','天猫','支付宝']asconst;//constAPP:readonly["TaoBao","Tmall","Alipay"]但是此时APP还是一个值,我们通过typeof获取APP的类型:typetypeOfAPP=typeofAPP;//typetypeOfAPP=readonly["TaoBao","Tmall","Alipay"]最后通过索引访问类型,得到字符串联合类型:typeapp=typeofAPP[number];//typeapp="TaoBao"|“天猫”|《支付宝》TypeScript系列TypeScript系列文章由官方文档、重点难点解析、实战技巧部分组成,内容涵盖入门、进阶、实战。旨在为您提供系统的TS学习教程。整个系列预计包含约40篇文章。点此浏览全系列文章,建议顺便收藏本站。微信:“mqyqingfeng”,加我到世优唯一的读者群。如有错误或不准确的地方,请务必指正,万分感谢。如果你喜欢或者有启发,欢迎star,这也是对作者的鼓励。