在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
我们用两个对象来描述两个码农的工资: const salary1 = { baseSalary: 100_000, yearlyBonus: 20_000 }; const salary2 = { contractSalary: 110_000 }; 然后写一个获取总工资的函数 function totalSalary(salaryObject: ???) { let total = 0; for (const name in salaryObject) { total += salaryObject[name]; } return total; } totalSalary(salary1); // => 120_000 totalSalary(salary2); // => 110_000 如果是你的,要如何声明 答案是使用一个索引签名! 接着,我们来看看什么是 1.什么是索引签名索引签名的思想是在只知道键和值类型的情况下对结构未知的对象进行类型划分。 它完全符合 我们用索引签名来声明 function totalSalary(salaryObject: { [key: string]: number }) { let total = 0; for (const name in salaryObject) { total += salaryObject[name]; } return total; } totalSalary(salary1); // => 120_000 totalSalary(salary2); // => 110_000
2. 索引签名语法索引签名的语法相当简单,看起来与属性的语法相似,但有一点不同。我们只需在方括号内写上键的类型,而不是属性名称:{ [ 下面是一些索引签名的例子。
interface StringByString { [key: string]: string; } const heroesInBooks: StringByString = { 'Gunslinger': '前端小智', 'Jack Torrance': '王大志' };
interface Options { [key: string]: string | number | boolean; timeout: number; } const options: Options = { timeout: 1000, timeoutMessage: 'The request timed out!', isFileUpload: false }; 签名的键只能是一个 3. 索引签名的注意事项
3.1不存在的属性如果试图访问一个索引签名为 { 正如预期的那样, 根据 索引签名只是将一个键类型映射到一个值类型,仅此而已。如果没有使这种映射正确,值类型可能会偏离实际的运行时数据类型。 为了使输入更准确,将索引值标记为 3.2 string 和 number 键假设有一个数字名称的字典: interface NumbersNames { [key: string]: string } const names: NumbersNames = { '1': 'one', '2': 'two', '3': 'three', // ... }; 不会,正常工作。 当在属性访问器中作为键使用时, 你可以认为 4.索引签名与 Record<Keys, Type>对比
const object1: Record<string, string> = { prop: 'Value' }; // OK const object2: { [key: string]: string } = { prop: 'Value' }; // OK 那问题来了...什么时候使用 我们知道,索引签名只接受 索引签名在键方面是通用的。 但是我们可以使用字符串字面值的联合来描述 type Salary = Record<'yearlySalary'|'yearlyBonus', number> const salary1: Salary = { 'yearlySalary': 120_000, 'yearlyBonus': 10_000 }; // OK
建议使用索引签名来注释通用对象,例如,键是字符串类型。但是,当你事先知道键的时候,使用 总结: 如果你不知道你要处理的对象结构,但你知道可能的键和值类型,那么索引签名就是你需要的。 索引签名由方括号中的索引名称及其类型组成,后面是冒号和值类型: 到此这篇关于浅谈TypeScript 索引签名的理解的文章就介绍到这了,更多相关TypeScript 索引签名内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论