简单聊聊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源码学习javascript(一)
Dec 27 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
Angular短信模板校验代码
Sep 23 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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
Cannot modify header information错误解决方法
2008/10/08 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
Prototype String对象 学习
2009/07/19 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
创业计划书模版
2014/02/05 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
医院信息公开实施方案
2014/05/09 职场文书
计算机实训报告范文
2014/11/05 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python
Python字符串常规操作小结
2022/04/03 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers