TypeScript-索引签名和只读属性

简介: TypeScript-索引签名和只读属性

#前言

索引签名和只读属性是TypeScript中的两个重要概念。索引签名允许您创建动态属性的对象,提高灵活性,而只读属性通过 "readonly" 关键字确保属性不可被修改,有助于保持对象的不可变性。这两个特性共同帮助开发者编写更具可维护性和类型安全性的代码



索引签名概述


索引签名用于描述那些 “通过索引得到” 的类型,比如 arr[10]obj["key"]只要 keyvalue 满足索引签名的限定即可, 无论有多少个都无所谓

  • 首先来看看 obj["key"] 的形式
interface FullName {
    [propName: string]: string
}
let obj: FullName = {
    firstName: 'Jonathan',
    lastName: 'Tang',
}
console.log(obj["firstName"]);


如果不满足接口索引签名限定的类型会报错如下:


  • 无论 key 是什么类型最终都会自动转换成字符串类型, 所以如下的代码就没有报错
interface FullName {
    [propName: string]: string
}
let obj: FullName = {
    firstName: 'Jonathan',
    lastName: 'Tang',
    false: '666'
}
console.log(obj["firstName"]);


  • 不报错的原理也挺简单的,还是如上那句话 无论key是什么类型最终都会自动转换成字符串类型 来验证一下这一点即可其实在我 ES6 文章当中已经说过了所以基础好还是非常重要的

  • 再来看看 arr[10] 的形式
  • 方式一
interface stringArray {
    [propName: number]: string
}
let arr: stringArray = {
    0: 'a',
    1: 'b',
    2: 'c'
};
console.log(arr[0]);


  • 方式二
interface stringArray {
    [propName: number]: string
}
let arr: stringArray = ['a', 'b', 'c'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);




只读属性概述


让对象属性只能在对象刚刚创建的时候修改其值 在只读属性限定前面添加 readonly 即可

interface FullName {
    firstName: string
    readonly lastName: string
}
let myName: FullName = {
    firstName: 'Jonathan',
    lastName: 'Lee'
};
myName.lastName = 'Wang';
console.log(myName);
  • TS 内部对只对属性进行了扩展,扩展出来了一个 只读数组(ReadonlyArray)
let arr2: ReadonlyArray<string> = ['a', 'b', 'c'];
console.log(arr2[0]);
arr2[0] = '666';
console.log(arr2[0]);

最后


本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
5月前
|
JavaScript 前端开发 编译器
TypeScript 类 第二章 【参数属性,存取器,静态属性】
TypeScript 类 第二章 【参数属性,存取器,静态属性】
38 2
|
7月前
|
JavaScript 安全 数据安全/隐私保护
TypeScript-属性装饰器
TypeScript-属性装饰器
30 0
|
7月前
|
索引
TypeScript-可选属性和索引签名
TypeScript-可选属性和索引签名
38 0
|
4月前
|
JavaScript
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
21 0
|
2月前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
44 0
|
13天前
|
JavaScript 开发者 索引
【亮剑】探讨了在TypeScript中为对象动态添加属性的三种方式
【4月更文挑战第30天】本文探讨了在TypeScript中为对象动态添加属性的三种方式:1) 使用索引签名允许添加任意属性,如`[key: string]: any`;2) 通过接口和类型别名提供编译时类型检查,例如`interface Person { name: string; age: number; }`;3) 利用类创建具有属性的对象,如`class Person { name: string; age: number; }`。每种方法有其适用场景,开发者可根据需求选择。
|
13天前
|
JavaScript 安全 前端开发
【亮剑】TypeScript 由于其强类型的特性,直接为对象动态添加属性可能会遇到一些问题
【4月更文挑战第30天】本文探讨了在 TypeScript 中安全地为对象动态添加属性的方法。基础方法是使用索引签名,允许接受任何属性名但牺牲了部分类型检查。进阶方法是接口扩展,通过声明合并动态添加属性,保持类型安全但可能导致代码重复。高级方法利用 OOP 模式的类继承,确保类型安全但增加代码复杂性。选择哪种方法取决于应用场景、代码复杂性和类型安全性需求。
|
4月前
|
JavaScript 算法 前端开发
TypeScript算法专题 - blog2 - 单链表节点的索引、结点删除与链表反转
TypeScript算法专题 - blog2 - 单链表节点的索引、结点删除与链表反转
31 0
|
4月前
|
JavaScript 前端开发 编译器
TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解(学习总结---从入门到深化)
TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解(学习总结---从入门到深化)
27 0
|
7月前
|
JavaScript 索引
TypeScript-索引访问操作符
TypeScript-索引访问操作符
26 1