关于ts中对象类索引签名-类型问题

153 阅读2分钟

类型问题:

大家好,我是刚加入掘金的小萌新,希望能在学习编程的过程中,能够与掘金的各位大佬学习到很多有用的知识,这是我发表的第一篇文章,有什么不足请各位大佬多多指点,非常感谢。
以下是我在学习ts过程中,对对象索引类型的一些认识,初学ts,经常会遇到很多难以理解的报错,但是没关系,大家集思广益一起改bug。我呢在索引类型这儿被坑了很久,所以发表本文章,希望以下内容对初学者有所帮助。不喜勿喷,谢谢谢谢谢谢。

interface IIndexType {
// 返回值类型的目的是告知通过索引去获取到的值是什么类型
[index:number]:string
[index:string]:any
[index: string]: string
[index:string|number]:string //错误格式,在ts的索引类型中,要求只能是string或者number,不能是其它/联合类型
}

索引签名: [index:number]:string 不报错

const names:IIndexType = ["haha","haha","haha"]
通过数组下标拿到可以拿到字符串类型的数组内容

索引签名 [index:string]:any 不报错

const namess:IIndexType = ["haha","haha","haha"]
因为拿数组中的数据时,index[0]和index["0"]一样,所以可以string类型的数组下标拿到数组的值

索引签名 [index:string]:string 报错

const namesss:IIndexType = ["haha","haha","haha"] 因为严格的字面量赋值检测:["haha","haha","haha"] 是Array实例,获取数组的内容是可以是namesss[0]也可以是namesss.forEach 而namesss.forEach又可以写成namesss["forEach"] 返回值是一个function,而且namess数组中还有很多东西(map,filter......),所以当索引的返回值是string类型时,就会报错,要想不报错,可以把返回值的类型写全。

还有什么遗漏的请大家多多补充,非常感谢。

注:以上内容理解来自王红元老师的课程。