说说我对TypeScript索引签名的理解

作者：DmitriPavlutin译者：前端小智来源：dmitripvlutin有梦想，有干货，微信搜索【大招天下】关注这位洗碗智者是谁一大早还在洗碗。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。我们用两个对象来描述两个程序员的工资：constsalary1={baseSalary:100_000,yearlyBonus:20_000};constsalary2={contractSalary:110_000};然后写一个函数totalSalary(salaryObject:???){lettotal=0;for(constnameinsalaryObject){total+=salaryObject[name];}返回总计;}totalSalary(salary1);//=>120_000totalSalary(salary2);//=>110_000ifYours，如何声明totalSalary()函数的salaryObject参数以接受具有字符串键和数值的对象？答案是使用索引签名！接下来，让我们看看什么是TypeScript索引签名以及什么时候需要它们。1.什么是索引签名？索引签名的思想是在只知道key和value类型的情况下，对结构未知的对象进行分类。它非常适合薪水参数的情况，因为函数应该接受不同结构的薪水对象，唯一的要求是属性值是一个数字。我们使用索引签名functiontotalSalary(salaryObject:{[key:string]:number}){lettotal=0;声明salaryObject参数。for(constnameinsalaryObject){total+=salaryObject[name];}返回总计;}totalSalary(salary1);//=>120_000totalSalary(salary2);//=>110_000{[key:string]:number}是索引签名，它告诉TypeScriptsalaryObject必须是字符串类型作为键，数字类型作为值对象。2.索引签名语法索引签名的语法相当简单，看起来与属性的语法相似，但有一点不同。我们只在方括号内写下键的类型，而不是属性名称：{[key:KeyType]:ValueType}。以下是索引签名的一些示例。字符串类型是键和值。interfaceStringByString{[key:string]:string;}constheroesInBooks:StringByString={'Gunslinger':'前端小智','JackTorrance':'王大智'};字符串类型为key，value可以是string或者number或者booleaninterfaceOptions{[key:string]:string|编号|布尔值；timeout:number;}constoptions:Options={timeout:1000,timeoutMessage:'请求超时！',isFileUpload:false};signedkeyonly可以是字符串、数字或符号。不允许使用其他类型。3、索引签名注意事项TypeScript中索引签名有一些注意事项，需要注意。3.1不存在的属性如果你试图访问一个索引签名为{[key:string]:string}的对象的不存在的属性会发生什么？正如预期的那样，TypeScript将值的类型推断为字符串。但是查看runtimevalue，是undefined：根据TypeScripthint，value变量是string类型，但是它的runtimevalue是undefined。索引签名只是将键类型映射到值类型，仅此而已。如果此映射不正确，值类型可能会偏离实际的运行时数据类型。为了使输入更准确，将索引值标记为字符串或未定义。这样，TypeScript就会意识到你正在访问的属性可能不存在3.2字符串和数字键假设一个数字名称的字典：interfaceNumbersNames{[key:string]:string}constnames:NumbersNames={'1':'一','2':'二','3':'三',//...};通过字符串键访问值按预期工作：如果我访问数字为1的值会出错吗？不，它有效工作。当JavaScript用作属性访问器中的键时，JavaScript会隐式地将数字强制转换为字符串（names[1]与names['1']相同）。TypeScript也强制执行此强制执行。您可以认为[key:string]与[key:string|数字]。4.Indexsignaturevs.RecordTypeScript有一个实用的类型Record，类似于indexsignature。constobject1:Record={prop:'Value'};//OKconstobject2:{[key:string]:string}={prop:'Value'};//OK，问题来了……什么时候使用Record什么时候使用索引签名？乍一看，它们看起来很相似。我们知道索引签名只接受字符串、数字或符号作为键类型。例如，如果您尝试使用字符串文字类型的联合作为索引签名中的键，则会出错。索引签名在键之间是通用的。但是我们可以使用字符串文字的并集来描述Record中的键typeSalary=Record<'yearlySalary'|'yearlyBonus',number>constsalary1:Salary={'yearlySalary':120_000,'yearlyBonus':10_000};//OKRecord针对具体的按键问题。建议使用索引签名来注释通用对象，例如键是字符串类型。但是，当您提前知道键时，使用Record来注释特定对象，例如字符串文字'prop1'|'prop2'用于键值。总结如果您不知道您正在处理的对象的结构，但您知道可能的键和值类型，那么索引签名就是您所需要的。索引签名由方括号中的索引名称及其类型组成，后跟冒号和值类型：{[indexName:KeyType]:ValueType}，KeyType可以是字符串、数字或符号，ValueType可以是任何类型。~~完了，我是玩玩志，正在写海贼王的这张最新画的《天王山》。更新超级刺激。我要去追它。下期见！编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。见谅：https://dmitripavutin.com/typ...交流文章每周更新。微信搜索【大千世界】即可第一时间阅读，回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录，欢迎Star。