簡單聊聊TypeScript唯讀修飾符

2022-04-06 19:01:49

前言

在Typescript 2.0中，引入了readonly關鍵字，可以對類中的屬性進行修飾，作用是：該屬性被readonly修飾之後無法修改**（如需修改，在建構函式中可以對唯讀屬性進行修改）**。

我們可以直接在interface和type中直接使用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唯讀修飾符內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

簡單聊聊TypeScript唯讀修飾符

目錄

前言

唯讀函數引數

如何更改函數

唯讀類屬性

唯讀索引

總結

熱門文章