让你彻底理解TypeScript中的readonly
typescript 理解 彻底 readonly
2023-09-27 14:22:17 时间
1.readonly的讲解
readonly修饰符,首先是一个关键字
对类中的属性成员进行修饰修饰之后,该属性成员就不能修改了。只能够进行访问
在构造函数中是可以对只读属性(readonly)进行修改的
2.什么时候使用readonly
需求:一旦实例化后,
就不能够对实例化的对象【name】属性进行修改值。
看下面的代
3.readonly的基本使用
class Person {
readonly name: string
constructor(name: string) {
this.name=name
}
say() {
console.log(`我的名字叫${this.name}`)
}
}
let person = new Person('小可爱');
console.log(person);
// ps:这里报错了
person.name = '大可爱'
4.有新的发现
有细心的小伙伴可能发现了。
我在let person = new Person('小可爱');这个时候并没有报错;
你不是说readonly修饰之后,该属性成员就不能修改了。
我可以去构造函数中修改被readonly修饰的成员 ;
机智的小伙伴可能就会这样去操作,在类中的普通方法去修改被readonly的属性
5.这样可以成功吗?
class Person {
readonly name: string
constructor(name: string) {
this.name=name
}
say() {
console.log(`我的名字叫${this.name}`)
}
//报错了。通过这个方法修改被readonly 修饰的成员
updtaName() {
this.name='张三'
}
}
let person = new Person('小可爱');
6.readonly 修饰参数属性
构造函数中的name参数,
一旦使用readonly进行修饰后,
那么该name参数就可以叫做参数属性
构造函数中的name参数,一旦使用readonly进行修饰后,
那么Person中就有了一个name属性成员
对上面这一句话的讲解
{ 本来我们是没有name属性的在Person类中,那为啥可以this.name=name }
也就是说 Person中就有了一个name属性成员;
因此我们才可以 this.name=name
class Person {
constructor(readonly name: string='大可爱') {
this.name=name
}
}
let person = new Person('小可爱');
console.log(person)
// Person { name: '小可爱' }
// 通过这个输出语句
// 我们可以说明
// 构造函数中的name参数,一旦使用readonly进行修饰后,
//那么Person中就有了一个name属性成员
console.log( person.name)
//输出 【小可爱】
7.可以省略构造中的this.name=name
class Person {
constructor(readonly name: string='大可爱') {
}
}
let person = new Person('小可爱');
console.log(person)
//输出 Person { name: '小可爱' }
//我们发现与上面的效果一样
8.readonly的总结
通过上面的栗子,
我们知道
readonly修饰符,首先是一个关键字
对类中的属性成员进行修饰
修饰之后,该属性成员就不能修改了。
只能够进行访问
在构造函数中是可以对只读属性(readonly)进行修改的
在类的普通方法中不能够被修改的哈!
相关文章
- TypeScript 类型系统
- vue cli4构建基于typescript的vue组件并发布到npm
- 让你彻底理解Typescript中静态成员和抽象方法
- Angular 学习笔记 (Typescript 高级篇)
- Cocos Creator + TypeScript 入门教程【转】
- 推荐 7 个学习 TypeScript 的宝库,2021 学 TS 看这篇就够了!
- TypeScript学习(九)interface 和 type 到底有什么区别?
- TypeScript学习(十一)enum枚举类型
- TypeScript学习(七)implements与extends的区别
- TypeScript学习笔记(五):接口
- TypeScript快餐教程 (1) - 初识
- 【TypeScript教程】# 15:泛型
- 【TypeScript教程】# 3:TS的类型声明
- 【TypeScript教程】学习笔记16篇(完结)
- 使用 TypeScript + React + Redux 进行项目开发(入门篇,附源码)
- 搭建Typescript+React项目模板