让你彻底理解TypeScript中的readonly

1.readonly的讲解

readonly修饰符,首先是一个关键字
对类中的属性成员进行修饰
修饰之后,该属性成员就不能修改了。
只能够进行访问
在构造函数中是可以对只读属性(readonly)进行修改的

2.什么时候使用readonly

在很多时候,我们对用户登录后;
会对用户的信息进行存储
这个时候我们是允许在对值进行修改
就是说:一旦确认后就不能够再次进行修改就可以使用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的属性

5.这样可以成功吗?

class Person {
    readonly name:  string
    constructor(name: string) {
        this.name=name
    }
    say() {
        console.log(`我的名字叫${this.name}`)
    }
    //报错了
    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参数,//那么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的问题是,它将原型的所有方法(无...
我对React很新,我正在尝试理解子组件之间相互通信的简洁方法...
我有一个非常简单的表单,我将用户电子邮件存储在组件的状态,...
我发现接口非常有用,但由于内存问题我需要开始优化我的应用程...
我得到了一个json响应并将其存储在mongodb中,但是我不需要的...
我试图使用loadsh从以下数组中获取唯一类别,[{"listing...