简单聊聊TypeScript只读修饰符


Posted in Javascript onApril 06, 2022

前言

在Typescript 2.0中,引入了readonly关键字,可以对类中的属性进行修饰,作用是:该属性被readonly修饰之后无法修改**(如需修改,在构造函数中可以对只读属性进行修改)**。

我们可以直接在interfacetype中直接使用readonly。

我们来看一个简单的例子:我们定义一个User type

type User={
   readonly  name : string;
   readonly  age  : number
}

我们可以创建一个user,并且初始化一个具体的值。

let user:User={
    name:'搞前端的半夏',
    age:18
}

如果我们去修改age的值,编译器会直接报错。

user.age=19

简单聊聊TypeScript只读修饰符

只读函数参数

在JS中,我们会经常使用const来定义变量,但是const无法保证Object内部的属性不被改变。还是上面的User type,

我们有一个函数接受User type的参数。我们在函数内部修改age属性,编译直接出错。

这样的好处是:我们可以确定这里定义的全局user,无法被改变

let user:User={
    name:'搞前端的半夏',
    age:18
}
UserInfo(user)
function UserInfo(user:User){
    user.age=19
    console.log(user.name,user.age)
}

简单聊聊TypeScript只读修饰符

如何更改函数

只读类属性

readonly修饰符还可以应用在类中声明的属性。这里我们创建了一个User类,具有只读的name和age,请注意这里的name和age是没有初始值的。

class User {
    readonly name: string;
    readonly age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    UserInfo(user:User){
        console.log(user.name,user.age)
    }
}

我们创建一个user实体,使用new方法创建对象的同时,给name和age添加默认值,由此可以得出结论

在类的constructor中,我们可以修改只读属性的值

name和age是只读的,我们可以获取具体的值。

let user =new User('搞前端的半夏',18)

console.log(user.name)
console.log(user.age)

但是,如果尝试修改name和age的值,会编译出错。

简单聊聊TypeScript只读修饰符

我们尝试在UserInfo中修改name和age:

UserInfo(user:User){
        this.age=20
        console.log(user.name,user.age)
    }

可以看到,编译仍然是错误的!我们可以得出结论

在类中的普通方法 无法 修改 被readonly的属性

简单聊聊TypeScript只读修饰符

只读索引

可以使用readonly来标记索引。例如下面的ReadonlyArray,可以有效的防止给具体的索引分配具体的值。

interface ReadonlyArray<T> {
  readonly length: number;
  // ...
  readonly [n: number]: T;
}

因为是只读的索引,所以下面的赋值操作,会编译出错。

const readonlyArray: ReadonlyArray<number> = [2, 3, 5, 7];
readonlyArray[4] = 11;

简单聊聊TypeScript只读修饰符

总结

readonly是TS类型系统的一部分,它只是一个编译时的工具,TypeScript 代码被编译为 JavaScript,所有的readonly都消失了。所以在运行时没有任何针对属性只读的保护。TS是通过编译器来检查并帮助你编写正确的代码。

例如下面的示例,即使我们的编译器提示有错误,TS仍然可以编译成对应的JS代码,这也完全说明TS只是在编译的阶段,引导我们规范正确的编码

简单聊聊TypeScript只读修饰符

到此这篇关于TypeScript只读修饰符的文章就介绍到这了,更多相关TS只读修饰符内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 变量命名规则
Sep 23 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
关于JS中的作用域中的问题思考分享
JavaScript中的LHS和RHS分析详情
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 #Vue.js
vue3使用vuedraggable实现拖拽功能
vue整合百度地图显示指定地点信息
vue中使用mockjs配置和使用方式
VUE使用draggable实现组件拖拽
Apr 06 #Vue.js
You might like
html静态页面调用php文件的方法
2014/11/13 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python通过opencv实现批量剪切图片
2017/11/13 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
麦当劳辞职信范文
2014/01/18 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
带薪年假请假条
2014/02/04 职场文书
教师学习培训邀请函
2014/02/04 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
采购部长岗位职责
2014/06/13 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
欠款证明
2015/06/24 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript