ts(typescript)面向对象之索引器

简介: 在TS中,默认情况下,不对索引器(成员表达式)做严格的类型检查使用配置noImplicitAny:true开启对隐式any的检查。

什么是索引器


我们都知道,ts 中 获取对象中的属性有好多种方式


1.通过点的方式来进行获取

2.通过属性表达式的方式进行获取

3.通过获取对象的属性描述符进行获取


20210126095514800.png


我们获取属性的第二种方式,对象[值],使用成员表达式就叫做是索引器,索引器里面的内容不是ts 新增,这里只讨论如何ts 如何给索引器添加类型检查


不用索引器存在的问题


对象赋值绕过ts 检查


20210126100238722.png


解决办法


在TS中,默认情况下,不对索引器(成员表达式)做严格的类型检查使用配置noImplicitAny:true开启对隐式any的检查。


隐式any:TS根据实际情况推导出的any类型


20210126100636853.png


索引器特征


  • 在索引器中,键的类型可以是字符串,也可以是数字


  • 在类中,索引器书写的位置应该是所有成员之前


class User{
  [props:string]:any // 这里的any 可以是 联合类型等
  name:string = 'cll'
  age: number = 9
}
const u = new User();
u['pid'] = '123'


TS中索引器的作用


  • 在严格的检查下,可以实现为类动态增加成员


  • 可以实现动态的操作类成员


2021012611184621.png


在JS中,所有的成员名本质上,都是字符串,如果使用数字作为成员名,会自动转换为字符串。


在TS中,如果某个类中使用了两种类型的索引器,要求两种索引器的值类型必须匹配


20210126111042415.png

相关文章
|
4月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
239 2
|
4月前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
45 1
|
3月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
63 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
36 0
|
7月前
|
索引 JavaScript 前端开发
21.【TypeScript 教程】索引类型
21.【TypeScript 教程】索引类型
50 2
|
7月前
|
JavaScript 前端开发 索引
typescript 可索引的类型
typescript 可索引的类型
|
8月前
|
JavaScript
【TS】You are currently running a version of TypeScript which is not officially supported by @typesc
【TS】You are currently running a version of TypeScript which is not officially supported by @typesc
247 2
|
8月前
|
JavaScript 前端开发 开发者
JavaScript(JS)和TypeScript(TS)的区别
JavaScript(JS)和TypeScript(TS)的区别
184 0
|
3月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
66 0
|
3月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧