某个袁 对 TypeScript 索引签名 理解(1)

}

totalSalary(salary1); // => 120_000

totalSalary(salary2); // => 110_000

{[key: string]: number} 是索引签名，它告诉TypeScript salaryObject 必须是一个以string 类型为键，以 number 类型为值的对象。

2. 索引签名语法

索引签名的语法相当简单，看起来与属性的语法相似，但有一点不同。我们只需在方括号内写上键的类型，而不是属性名称：{ [key: KeyType]: ValueType }。

下面是一些索引签名的例子。

string 类型是键和值。

interface StringByString {

}

const heroesInBooks: StringByString = {

‘Gunslinger’: ‘前端小智’,

‘Jack Torrance’: ‘王大志’

};

string 类型是键，值可以是 string、number或boolean

interface Options {

key: string: string | number | boolean;

timeout: number;

}

const options: Options = {

timeout: 1000,

timeoutMessage: ‘The request timed out!’,

isFileUpload: false

};

签名的键只能是一个 string``、number或 symbol。其他类型是不允许的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydcT7rwX-1634170942222)(/img/bVcU4IO)]

3. 索引签名的注意事项

TypeScript中的索引签名有一些注意事项，需要注意。

3.1不存在的属性

如果试图访问一个索引签名为 { [key: string]: string } 的对象的一个不存在的属性，会发生什么？

正如预期的那样，TypeScript 将值的类型推断为 string。但是检查运行时值，它是undefined:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4pzniXqs-1634170942224)(/img/bVcU4JC)]

根据 TypeScript 提示, value变量是一个 string 类型，但是它的运行时值是 undefined。

索引签名只是将一个键类型映射到一个值类型，仅此而已。如果没有使这种映射正确，值类型可能会偏离实际的运行时数据类型。

为了使输入更准确，将索引值标记为 string 或 undefined。这样，TypeScript就会意识到你访问的属性可能不存在

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DH7pvcu1-1634170942225)(/img/bVcU4JI)]

3.2 string 和 number 键

假设有一个数字名称的字典:

interface NumbersNames {

}

const names: NumbersNames = {

‘1’: ‘one’,

‘2’: ‘two’,

‘3’: ‘three’,

// …

};

通过字符串键访问值与预期一致:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ObjqSOEJ-1634170942227)(/img/bVcU4JR)]

如果用数字 1 访问一个值会出错吗?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MOVZSQUD-1634170942228)(/img/bVcU4JW)]

不会，正常工作。

当在属性访问器中作为键使用时，JavaScript隐式地将数字强制为字符串(names[1]与names['1']相同)。TypeScript也会执行这个强制。

你可以认为 [key: string] 与 [key: string | number] 相同。

4.索引签名与 Record<Keys, Type>对比

TypeScript有一个实用类型 Record<Keys, Type>，类似于索引签名。

const object1: Record<string, string> = { prop: ‘Value’ }; // OK

const object2: { key: string: string } = { prop: ‘Value’ }; // OK

那问题来了…什么时候使用 Record<Keys, Type>，什么时候使用索引签名？乍一看，它们看起来很相似

我们知道，索引签名只接受 string、number 或 symbol 作为键类型。如果你试图在索引签名中使用，例如，字符串字面类型的联合作为键，这是一个错误。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E3JtkRY7-1634170942229)(/img/bVcU4Kc)]

索引签名在键方面是通用的。

但是我们可以使用字符串字面值的联合来描述 Record<keys, Type>中的键

type Salary = Record<‘yearlySalary’|‘yearlyBonus’, number>

const salary1: Salary = {

‘yearlySalary’: 120_000,

‘yearlyBonus’: 10_000

}; // OK

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！