简单聊聊TypeScript只读修饰符

目录
  • 前言
  • 只读函数参数
    • 如何更改函数
  • 只读类属性
  • 只读索引
  • 总结

前言

在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

只读函数参数

在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)
}

如何更改函数

只读类属性

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的值,会编译出错。

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

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

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

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

只读索引

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

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

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

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

总结

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

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

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

(0)

相关推荐

  • 详解JavaScript私有类字段和TypeScript私有修饰符

    JavaScript私有类字段和隐私需求 在过去,JavaScript 没有保护变量不受访问的原生机制,当然除非是典型闭包. 闭包是 JavaScript 中许多类似于私有模式(如流行的模块模式)的基础.但是,近年来 ECMAScript 2015 类被使用后,开发人员感到需要对类成员的隐私进行更多控制. 类字段提案(在撰写本文时处于第 3 阶段)试图通过引入私有类字段来解决问题. 让我们看看它们是什么样子的. 一个 JavaScript 私有类字段的例子 这是一个带有私有字段的 JavaScr

  • TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符

    目录 1.类的定义 2.类的继承 3.修饰符 前言: typeScript 中的类与 ES6 中的类非常相似,如果不知道 ES6 中的类,建议先学习下 ES6 中的 class .本篇文章重点介绍 typeScript 中的类定义.继承以及修饰符. 1.类的定义 类描述了所创建的对象共同的属性和方法.typeScript 支持面向对象的所有特性,比如类.接口等. 在 typeScript 中定义类的时候,使用 class 关键字,类名首字母使用大写,类可以包含以下三个模块: ​字段​ - 字段是

  • 简单聊聊TypeScript只读修饰符

    目录 前言 只读函数参数 如何更改函数 只读类属性 只读索引 总结 前言 在Typescript 2.0中,引入了readonly关键字,可以对类中的属性进行修饰,作用是:该属性被readonly修饰之后无法修改**(如需修改,在构造函数中可以对只读属性进行修改)**. 我们可以直接在interface和type中直接使用readonly. 我们来看一个简单的例子:我们定义一个User type type User={ readonly name : string; readonly age :

  • TypeScript 类class与修饰符的详细使用教程

    目录 一.简介 二.成员修饰符 访问修饰符 只读修饰符 静态修饰符 总结 一.简介 通过 class 关键字定义一个类,然后通过 new 关键字可以方便的生产一个类的实例对象,这个生产对象的过程叫 实例化,类的成员就是类中所有的属性和方法. // 定义类 class Person { // 名称 name: string // 年龄 age: number // 构造函数 constructor(name: string, age: number) { // 更新熟悉数据 this.name =

  • iOS 各种修饰符的区别汇总(推荐)

    atomic 设置成员变量的@property属性时,默认为atomic,提供多线程安全. 在多线程环境下,原子操作是必要的,否则有可能引起错误的结果.加了atomic,setter函数会变成下面这样: {lock} if (property != newValue) { [property release]; property = [newValue retain]; } {unlock} nonatomic 禁止多线程,变量保护,提高性能. atomic是Objc使用的一种线程保护技术,基本

  • Vue.js学习笔记之修饰符详解

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点"."连接修饰符名称. 一.v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令.在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值. 为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安

  • vue中v-model和.sync修饰符的区别

    目录 前言 一.v-model 1. 作用 2.v-model的本质 3. v-model的特殊用法 二..sync修饰符 1. .sync修饰符作用 2. .sync修饰符本质 总结 .sync与v-model区别是 前言 在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖.但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符.在这里就两者的使用进

  • 聊聊Java中的Native修饰符

    目录 Native修饰符的使用 native主要用于方法上 说明 举例 Native修饰的方法到底有什么用处 什么是NativeMethod 为什么要使用NativeMethod JVM怎样使NativeMethod跑起来 Native修饰符的使用 native主要用于方法上 1.一个native方法就是一个Java调用非Java代码的接口.一个native方法是指该方法的实现由非Java语言实现,比如用C或C++实现. 2.在定义一个native方法时,并不提供实现体(比较像定义一个Java

  • 简单总结C++中的修饰符类型

    C++ 允许在 char.int 和 double 数据类型前放置修饰符.修饰符用于改变基本类型的含义,所以它更能满足各种情境的需求. 下面列出了数据类型修饰符: signed unsigned long short 修饰符 signed.unsigned.long 和 short 可应用于整型,signed 和 unsigned 可应用于字符型,long 可应用于双精度型. 修饰符 signed 和 unsigned 也可以作为 long 或 short 修饰符的前缀.例如:unsigned

  • PHP中的访问修饰符简单比较

    PHP public访问修饰符 示例: <?php header("content-type:text/html;charset=utf-8"); // BaseClass class pub { public $tag_line = "我们!"; function display() { echo $this->tag_line."<br/>"; } } // 子类 class child extends pub { f

随机推荐