前言

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

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

我們來看一個簡單的例子：我們定義一個User type

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

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

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

如果我們?nèi)バ薷腶ge的值，編譯器會直接報錯。

user.age=19

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

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

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

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

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

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

如何更改函數(shù)

只讀類屬性

readonly修飾符還可以應用在類中聲明的屬性。這里我們創(chuàng)建了一個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)
    }
}

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

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

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

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

只讀索引

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

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

因為是只讀的索引，所以下面的賦值操作，會編譯出錯。

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

總結(jié)

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

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

到此這篇關(guān)于TypeScript只讀修飾符的文章就介紹到這了,更多相關(guān)TS只讀修飾符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論