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中的readonly的更多相关文章

  1. 十分钟教你理解TypeScript中的泛型

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://blog.bitsrc.io/understanding-generics-in-t ...

  2. typescript 中的 infer 关键字的理解

    infer 这个关键字,整理记录一下,避免后面忘记了.有点难以理解呢. infer infer 是在 typescript 2.8中新增的关键字. infer 可以在 extends 条件类型的字句中 ...

  3. TypeScript 中命名空间与模块的理解?区别?

    一.模块 TypeScript 与ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块 相反地,如果一个文件不带有顶级的import或者expo ...

  4. 【TypeScript】如何在TypeScript中使用async/await,让你的代码更像C#。

    [TypeScript]如何在TypeScript中使用async/await,让你的代码更像C#. async/await 提到这个东西,大家应该都很熟悉.最出名的可能就是C#中的,但也有其它语言也 ...

  5. TypeScript中的怪语法

    TypeScript中的怪语法 如何处理undefined 和 null undefined的含义是:一个变量没有初始化. null的含义是:一个变量的值是空. undefined 和 null 的最 ...

  6. JavaScript 和 TypeScript 中的 class

    对于一个前端开发者来说,很少用到 class ,因为在 JavaScript 中更多的是 函数式 编程,抬手就是一个 function,几乎不见 class 或 new 的踪影.所以 设计模式 也是大 ...

  7. TypeScript 中的方法重载

    方法重载(overload)在传统的静态类型语言中是很常见的.JavaScript 作为动态语言, 是没有重载这一说的.一是它的参数没有类型的区分,二是对参数个数也没有检查.虽然语言层面无法自动进行重 ...

  8. TypeScript中使用getElementXXX()

    如果只是看解决方法,可以直接跳到第二小节 简述 Angular 1.x版本是用JavaScript编写的,我们在百度Angular经常会搜索到AngularJS,并不是JavaScript的什么衍生版 ...

  9. typeScript中的数据类型

    /* typeScript中的数据类型 typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typescript中主要给我们提供了以下数据类型 布尔类型(boolean) 数 ...

  10. TypeScript中的private、protected

    首先我们要清楚 private . protected 现阶段只是javascript中的保留字(Reserved words),而非关键字(Keywords ).因此TypeScript中的纯类型声 ...

随机推荐

  1. SQL操作:WITH表达式及其应用

    摘要:本文将围绕WITH,以及更高阶的WITH RECURSIVE表达式介绍其语法特征和具体使用规范,以及在GaussDB(DWS)中如何进行WITH表达式的调优 本文分享自华为云社区<Gaus ...

  2. k8s源码Client-go中Reflector解析

    摘要:通过本文,可以了解Reflector通过ListWatcher从Kubernetes API中获取对象的流程,以及存储到store中,后续会对DeltaFIFO进行源码研读,通过结合inform ...

  3. JerryScript:物联网开发者的得力工具

    摘要:本文档以Linux开发环境及realview-pbx-a9开发板为例,简单介绍LiteOS上jerryscript命令的使用. 本文分享自华为云社区<Jerryscript-让开发者事半功 ...

  4. 正确理解c# default关键字

    背景 最近QA测试一个我开发的一个Web API时,我意识到之前对C#的default的理解一直是想当然的.具体情况是这样,这个API在某些条件下要返回模型的默认值,写法类似于下面这样 [HttpGe ...

  5. #2069:Coin Change(完全背包)

    Problem Description Suppose there are 5 types of coins: 50-cent, 25-cent, 10-cent, 5-cent, and 1-cen ...

  6. ACM:快读读入技巧

    快速读入:当数据输入较大时,比scanf快 inline int read(){ int s=0,w=1; char ch=getchar(); while(ch<'0'||ch>'9') ...

  7. Educational Codeforces Round 98 (Rated for Div. 2) (A - E题题解)

    呼,熬过一场考试,补下题吧 A. Robot Program 在一个二维无限方格中,初始时你在格子里,每秒你有5种决策:选择移动到上下左右四个格子中的一个或者停留在原地.你不能连续两秒做相同的决策,问 ...

  8. 图解 Promise 实现原理(四)—— Promise 静态方法实现

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/Lp_5BXdpm7G29Z7zT_S-bQ作者:Morrain 了用法,原生提供了Promis ...

  9. 【驱动】ifconfig up后内核网络驱动做了什么.md

    背景 最近在排查一个网络问题,ifconfig eth0 up 后,网卡link up比较慢.因此,分析了下从ifconfig up 到网络驱动的调用流程.这里顺便作个记录. ifconfig eth ...

  10. POJ

    //poj 2080//题目大意:给定天数,从2000年1月1日经过这些天后的 年 月 日 及 星期几//代码参照大牛的写的,本人还是处于菜鸟阶段,思路很好#include<stdio.h> ...