索引类型normal（一文读懂TS索引签名）

索引:对象或数组的对应位置的名字

数组的索引就是 number 类型的 0,1,2,3...

对象的索引就是 string 类型的属性名

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

type numberIndex{ [index:number]:string } const testArray:numberIndex = ["1","2",3]// 不能将类型“number 
  
  
  
  
  
  
  ”分配给类型“string 
  
  
  
  
  
  
  
” 
  
  
  
  
  
  
  。ts(2322) 所需类型来自此索引签名

可以看到 testArray 数组的第三位不符合 numberIndex 的约束.

TIP

索引签名的名称如[index:number]:string里的index除了可读性外,并无任何意义.但有利于下一个开发者理解你的代码.

字符串索引签名:用于约束对象

type objectType{ [propName:string]:number } const testObj:objectType = { "name":100, "age":"200" // 不能将类型“string

 


 


 


 


 


 


 

”分配给类型“number 
 
 
 
 
 
 
 ” 
  
  
  
  
  
  
  
。ts(2322) 所需类型来自此索引签名

 


 


 


 


 


 


 

。 }

可以看到 testObj 的第二个对象不符合 objectType 的约束.

注意事项

可以看到上述的例子我都没有在类型别名中添加其他的约束条件,仅写了一个索引签名约束

type attentionType{ name: string; // Ok age?: number; // 类型“number | undefined 
   
   
   
   
   
   
   
”的属性“age
 

 

 

 

 

 

 
”不能赋给“string
 

 

 

 

 

 

 

 ”索引类型“string              ” 
 
 
 
 
 
 
 。ts(2411) sex?: undefined; // OK [propName: string]: string | undefined; }

上述例子说明了,一旦定义了索引签名,那么确定属性和可选属性的类型都必须是它的类型的子集

可以同时使用两种类型的索引 
  
  
  
  
  
  
  ，但是数字索引的返回值必须是字符串索引返回值类型的子类型 
   
   
   
   
   
   
   
。 这是因为当使用 number 来索引时 
  
  
  
  
  
  
  
，JavaScript 会将它转换成 string 然后再去索引对象
 

 

 

 

 

 

 
。

interface Animal { name: string; } interface Dog extends Animal { breed: string; } interface NotOkay { [x: string]: Dog; [x: number]: Animal; // Error } interface Okay { [x: string]: Animal; [x: number]: Dog; // OK }

参考链接: https://juejin.cn/post/7003171767560716302#heading-21