#前言
索引签名和只读属性是TypeScript中的两个重要概念。索引签名允许您创建动态属性的对象,提高灵活性,而只读属性通过 "readonly" 关键字确保属性不可被修改,有助于保持对象的不可变性。这两个特性共同帮助开发者编写更具可维护性和类型安全性的代码
索引签名概述
索引签名用于描述那些 “通过索引得到” 的类型,比如
arr[10]
或obj["key"]
只要key
和value
满足索引签名的限定即可, 无论有多少个都无所谓
- 首先来看看
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]);
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗