彻底搞懂Type Script中的索引签名

索引签名含义

• 索引签名是type script里的一个语法糖
• 所谓索引，就是根据一定的指向返回相应的值
• 比如数组的索引就是下标0,1,2....
• type script里的索引签名有两种：数字索引和字符串索引

数字索引:通过定义接口用来对数组的约束

数字索引的本质和数组索引的查找形式一致，只是定义形式不同

如果数字索引的数组里存了其他类型，则报错

//数组,里面存的值可以为各种类型
var arr=[1,2,'3',{name:"looper"}]
console.log("普通数组的第一个值"+arr[0])

//数字索引
//约束:只有一种类型，下标必须是number类型
interface numberIndex{
    [index:number]:string
}
var numberTest: numberIndex=['1','2','3']//numberTest的类型是numberIndex,约束了数组类型，并且是string
console.log('数字索引的第一个值'+numberTest[0])

字符串索引：通过定义接口用来对对象的约束

//对象,展现形式是key--->value，value可以是任意类型
var obj={
    name:"looper",
    age:12
}
console.log("普通对象的名字是"+obj.name)

//字符串索引
//约束:只有一种类型，下标必须是string类型
interface strIndex{
    [index:string]:string
}
var strTest:strIndex={
    name:"looper--->字符串索引",
    age:"12------>字符串索引",
    sex:"男------>字符串索引"
}//strTest的类型是strIndex,约束了对象类型，并且是string
console.log("字符串索引的名字是"+strTest.name)

案例

统计一个数组中每个数字的出现次数并打印

我们采用数字索引实现

 let  comControl: { [code: string]: number } ={}//定义字符串索引类型
    let srr=[1,2,3,3,4,2,1,3,1]
    srr.forEach(x=>{
      if(Object.keys(comControl).filter(y=>y==x.toString()).length<1){
        comControl[x.toString()]=1
        return
      }
        comControl[x.toString()]++
    })
   for (let i in comControl){//打印输出的值
    console.log(i+"出现的次数是:"+comControl[i])
   }

    //1出现的次数是:3
    //2出现的次数是:2
    //3出现的次数是:3
    //4出现的次数是:1