TypeScript里的Index signature

简介: TypeScript里的Index signature

参考链接:https://basarat.gitbook.io/typescript/type-system/index-signatures

看一个例子:

class Foo {
      constructor(public message: string){};
      log(){
        console.log(this.message)
      }
    }
    let foo: any = {};
    foo['Hello'] = new Foo('World');
    foo['Hello'].log(); // World
    console.log(c);

最后输出World

如果把一个对象作为key,结果会怎么样?JavaScript会自动调用该对象的toString实现,将结果作为key来访问。

let obj = {
toString(){
console.log('toString called')
return 'Hello'
}
}
let foo: any = {};
foo[obj] = 'World'; // toString called
console.log(foo[obj]); // toString called, World
console.log(foo['Hello']); // World

而在TypeScript里,无法通过编译:TS2538: Type ‘{ toString(): string; }’ cannot be used as an index type.


image.png


除非显式调用toString方法:


image.png


测试结果:


image.png


结论1:TypeScript index signatures must be either string or number


看个例子:

let foo2:{ [index:string] : {message: string} } = {};


foo2是一个对象,包含了一个index signature,类型为字符串。名称可以任意取,该index指向另一个对象,该对象必须包含一个字段message,值为string.


下列代码会引起编译错误:

image.png




相关文章
|
JavaScript 前端开发
什么是 TypeScript 里的 Constructor signature
什么是 TypeScript 里的 Constructor signature
171 0
什么是 TypeScript 里的 Constructor signature
|
JavaScript
关于 TypeScript 内 constructor signature 的一些失败尝试
关于 TypeScript 内 constructor signature 的一些失败尝试
关于 TypeScript 内 constructor signature 的一些失败尝试
|
JavaScript
TypeScript constructor signature 类型的变量赋值方式
TypeScript constructor signature 类型的变量赋值方式
100 0
TypeScript constructor signature 类型的变量赋值方式
|
JavaScript
TypeScript里的Index signature
TypeScript里的Index signature
87 0
TypeScript里的Index signature
|
19天前
|
JavaScript 编译器
TypeScript中类型守卫:缩小类型范围的艺术
【4月更文挑战第23天】TypeScript中的类型守卫是缩小类型范围的关键技术,它帮助我们在运行时确保值的精确类型,提升代码健壮性和可读性。类型守卫包括`typeof`(检查原始类型)、`instanceof`(检查类实例)和自定义类型守卫。通过这些方法,我们可以更好地处理联合类型、泛型和不同数据源,降低运行时错误,提高代码质量。
|
3月前
|
JavaScript 前端开发 安全
Apollo与TypeScript:强大类型检查在前端开发中的应用
Apollo与TypeScript:强大类型检查在前端开发中的应用
|
12天前
|
JavaScript 安全 前端开发
【TypeScript技术专栏】TypeScript中的类型推断与类型守卫
【4月更文挑战第30天】TypeScript的类型推断与类型守卫是提升代码安全的关键。类型推断自动识别变量类型,减少错误,包括基础、上下文、最佳通用和控制流类型推断。类型守卫则通过`typeof`、`instanceof`及自定义函数在运行时确认变量类型,确保类型安全。两者结合使用,优化开发体验,助力构建健壮应用。
|
12天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
12天前
|
JavaScript 安全 前端开发
【亮剑】TypeScript 由于其强类型的特性,直接为对象动态添加属性可能会遇到一些问题
【4月更文挑战第30天】本文探讨了在 TypeScript 中安全地为对象动态添加属性的方法。基础方法是使用索引签名,允许接受任何属性名但牺牲了部分类型检查。进阶方法是接口扩展,通过声明合并动态添加属性,保持类型安全但可能导致代码重复。高级方法利用 OOP 模式的类继承,确保类型安全但增加代码复杂性。选择哪种方法取决于应用场景、代码复杂性和类型安全性需求。
|
12天前
|
JavaScript 前端开发
TypeScript基础类型
TypeScript基础类型