简单聊聊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 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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
Yii框架上传图片用法总结
2016/03/28 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
JavaScript的Function详细
2006/11/14 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python生成器generator用法实例分析
2015/06/04 Python
python脚本内运行linux命令的方法
2015/07/02 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python如何输出整数
2020/06/07 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
银行纠风工作实施方案
2014/06/08 职场文书
啦啦队口号大全
2014/06/16 职场文书
向女朋友道歉的话
2015/01/20 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
党支部审查意见
2015/06/02 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers