Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use TypeScript read-only modifiers". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use TypeScript read-only modifiers" can help you solve the problem.

Preface

In Typescript 2.0, the readonly keyword is introduced to modify the attribute in the class. The purpose is that the attribute cannot be modified after it is modified by readonly (if necessary, the read-only attribute can be modified in the constructor) * *.

We can use readonly directly in interface and type.

Let's look at a simple example: let's define a User type

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

We can create a user and initialize a specific value.

Let user:User= {name:' doing the front end of Pinellia ternata, age:18}

If we modify the value of age, the compiler will report an error directly.

User.age=19

Read-only function parameter

In JS, we often use const to define variables, but const cannot guarantee that the properties within Object will not be changed. Or the User type above?

We have a function that takes arguments to User type. We modify the age property inside the function, resulting in a direct compilation error.

The advantage is that we can make sure that the global user defined here cannot be changed.

Let user:User= {name:' Front-end Pinellia ternata, age:18} UserInfo (user) function UserInfo (user:User) {user.age=19 console.log (user.name,user.age)}

How to change function read-only class properties

The readonly modifier can also be applied to properties declared in the class. Here we create a User class with read-only name and age. Note that name and age have no initial values.

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

We create a user entity and use the new method to create objects while adding default values to name and age, from which we can draw a conclusion

In the constructor of the class, we can modify the value of the read-only property

Name and age are read-only, and we can get specific values.

Let user = new User ('Pinellia ternata in front end', 18) console.log (user.name) console.log (user.age)

However, if you try to change the values of name and age, there will be a compilation error.

We try to modify name and age in UserInfo:

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

As you can see, the compilation is still wrong! We can draw a conclusion.

Ordinary methods in a class cannot modify the properties of the readonly

Read-only index

You can use readonly to mark the index. For example, the following ReadonlyArray can effectively prevent specific indexes from assigning specific values.

Interface ReadonlyArray {readonly length: number; / /... Readonly [n: number]: t;}

Because it is a read-only index, the following assignment will cause a compilation error.

Const readonlyArray: ReadonlyArray = [2,3,5,7]; readonlyArray [4] = 11

This is the end of the introduction to "how to use TypeScript read-only modifiers". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.