有的時(shí)候我們希望對(duì)類成員(屬性,方法)進(jìn)行一定的訪問控制,來保證數(shù)據(jù)的安全,通過類修飾符可以做到這一點(diǎn),目前typescript提供了四種修飾符,這篇文章主要給大家介紹了關(guān)于TypeScript只讀修飾符的相關(guān)資料,需要的朋友可以參考下

前言

在Typescript 2.0中，引入了readonly關(guān)鍵字，可以對(duì)類中的屬性進(jìn)行修飾，作用是：該屬性被readonly修飾之后無法修改**（如需修改，在構(gòu)造函數(shù)中可以對(duì)只讀屬性進(jìn)行修改）**。

我們可以直接在interface和type中直接使用readonly。

我們來看一個(gè)簡(jiǎn)單的例子：我們定義一個(gè)User type

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

我們可以創(chuàng)建一個(gè)user，并且初始化一個(gè)具體的值。

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

如果我們?nèi)バ薷腶ge的值，編譯器會(huì)直接報(bào)錯(cuò)。

user.age=19

只讀函數(shù)參數(shù)

在JS中，我們會(huì)經(jīng)常使用const來定義變量，但是const無法保證Object內(nèi)部的屬性不被改變。還是上面的User type，

我們有一個(gè)函數(shù)接受User type的參數(shù)。我們?cè)诤瘮?shù)內(nèi)部修改age屬性，編譯直接出錯(cuò)。

這樣的好處是：我們可以確定這里定義的全局user，無法被改變

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

function UserInfo(user:User){
    user.age=19
    console.log(user.name,user.age)
}

如何更改函數(shù)

只讀類屬性

readonly修飾符還可以應(yīng)用在類中聲明的屬性。這里我們創(chuàng)建了一個(gè)User類，具有只讀的name和age，請(qǐng)注意這里的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)
    }
}

我們創(chuàng)建一個(gè)user實(shí)體，使用new方法創(chuàng)建對(duì)象的同時(shí)，給name和age添加默認(rèn)值，由此可以得出結(jié)論

在類的constructor中，我們可以修改只讀屬性的值

name和age是只讀的，我們可以獲取具體的值。

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

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

但是，如果嘗試修改name和age的值，會(huì)編譯出錯(cuò)。

我們嘗試在UserInfo中修改name和age：

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

可以看到，編譯仍然是錯(cuò)誤的！我們可以得出結(jié)論

在類中的普通方法無法修改被readonly的屬性

只讀索引

可以使用readonly來標(biāo)記索引。例如下面的ReadonlyArray，可以有效的防止給具體的索引分配具體的值。

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

因?yàn)槭侵蛔x的索引，所以下面的賦值操作，會(huì)編譯出錯(cuò)。

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

總結(jié)

readonly是TS類型系統(tǒng)的一部分，它只是一個(gè)編譯時(shí)的工具，TypeScript 代碼被編譯為 JavaScript，所有的readonly都消失了。所以在運(yùn)行時(shí)沒有任何針對(duì)屬性只讀的保護(hù)。TS是通過編譯器來檢查并幫助你編寫正確的代碼。

例如下面的示例，即使我們的編譯器提示有錯(cuò)誤，TS仍然可以編譯成對(duì)應(yīng)的JS代碼，這也完全說明TS只是在編譯的階段，引導(dǎo)我們規(guī)范正確的編碼