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]);

最后


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

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

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

热门文章

最新文章