TypeScript19：索引器

一、索引器

索引器：对象[值]，使用成员表达式。

1. js 中的索引器

javascript 复制代码

const obj = {
  name: "张三",
  age: 18,
  "my-height":185
}
for (const key in obj) {
  console.log(obj[key]);
}
// 张三
// 18
// 185

2. es6 中的索引器

javascript 复制代码

const methodName = "sayHello"
class User { 
  constructor(
    public name: string,
    public age: number
  ) { }
  [methodName]() {
    console.log("hello");
  }
}
const u = new User("张三", 18)
u[methodName]() // hello

3. TS 中的索引器

在 TS 中，默认情况下，不对索引器（成员表达式）做严格的类型检查。

此时虽然 User 类中并没有 pid 属性，但是也不会进行报错。

如果想要开启严格的类型检查，需要在 ts.config.js 文件中进行配置：将 noImplicitAny 设置为 true ，开启对隐式 any 的类型检查。

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

**索引器的使用：**在索引器中，键的类型可以是字符串，也可以是数字。

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

javascript 复制代码

class User { 
  [prop:string]:any
  constructor(
    public name: string,
    public age: number
  ) { }
}
const u = new User('张三', 18)
u["pid"]= 1
console.log(u["pid"]) // 1
u.pid = "5s"
console.log(u["pid"]) // 5s

将 MyArray 类中的属性为 0 的项赋值为 1 ：

javascript 复制代码

// index.ts
class MyArraay { 
  0 = 1
}

// 编译后的index.js
var MyArraay = /** @class */ (function () {
    function MyArraay() {
        this[0] = 1;
    }
    return MyArraay;
}());

TS 中索引器的作用：

在严格的检查下，可以实现为类动态增加成员；
可以实现动态的操作类成员；

javascript 复制代码

class MyArraay { 
  [index:number]:any
  0 = 1
  1 = "asd"
}
const my = new MyArraay()
my[5] = "张三"
console.log(my); // MyArraay { '0': 1, '1': 'asd', '5': '张三' }

二、数字索引器

javascript 复制代码

const a: any = {}
a[0] = 1
console.log(a); // { '0': 1 }
a["0"] = "3"
console.log(a); // { '0': '3' }

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

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