TypeScript Const和Readonly的區別用法及代碼示例

常量和隻讀兩者都用於創建一旦被某個值初始化就無法重新分配的變量和屬性。但它們彼此不同。讓我們討論一下它們之間的差異。

常量

常量關鍵字用於聲明以後不能重新賦值的常量變量。主要應用於變量聲明。

用法:

const variableName: variableType = value;

特征：

const 關鍵字不允許將值重新分配給變量。
常量變量必須在聲明時初始化。
使用定義的變量常量關鍵字有塊範圍。
使用定義的數組常量關鍵字也不能用新數組重新分配。雖然可以使用索引更新數組值。

例子：下麵的代碼示例實現了 const 關鍵字來在 TypeScript 中聲明變量。

Javascript


const cmpny_name: string = "GeeksforGeeks";
const employees: number = 300;
const arr: (string | number)[] =
    [1, 2, "four", "four"];
console.log
    ("Before modifying array elements: ", arr);
arr[2] = "three";
console.log
    ("After modifying array elements: ", arr);
console.log
    (`Company Name: ${cmpny_name}, Workforce: ${employees}+`);
cmpny_name = "New Company";
employees = 200;
console.log
    (`Company Name: ${cmpny_name}, Workforce: ${employees}+`);

輸出：

Before modifying array elements:  [1, 2, "four", "four"]
After modifying array elements:  [1, 2, "three", "four"]
Company Name: GeeksforGeeks, Workforce: 300+
Cannot assign to 'cmpny_name' because it is a constant.
Cannot assign to 'employees' because it is a constant.

隻讀

隻讀關鍵字用於定義一旦使用值初始化後就無法更改其值的屬性。這隻讀主要與對象、類和接口的屬性一起使用。

用法:

class className {
    public readonly propertyName = value;
}

特征：

使用定義的屬性隻讀必須在聲明時或使用類的構造函數時賦值(如果它是類屬性)。
隻讀屬性的值不能被重新分配新值。
readonly 可用於將整個對象或特定屬性創建為隻讀。

例子：下麵的代碼示例說明了 readonly 定義屬性的實際實現。

Javascript


// Implementation with classes
class cmpny {
    public readonly name: string =
        "GeeksforGeeks";
    public readonly desc: string =
        "A Computer Science Portal.";
}
const myCmpny = new cmpny();
console.log
    (`Company: ${myCmpny.name}, 
    Description: ${myCmpny.desc}`);
myCmpny.name = "New Company";
myCmpny.desc = "New Description";
console.log
    (`Company: ${myCmpny.name}, 
    Description: ${myCmpny.desc}`);
// Implementation with interface and object
interface readonlyInterface {
    readonly crktr_name: string,
    readonly runs: number
}
const obj: readonlyInterface = {
    crktr_name: "Virat Kohli",
    runs: 26000
}
console.log
    (`Cricketer Name: ${obj.crktr_name},
     Runs: ${obj.runs}`);
obj.crktr_name = "Sachin Tendulkar";
obj.runs = 30000;
console.log
    (`Cricketer Name: ${obj.crktr_name}, 
    Runs: ${obj.runs}`);

輸出：

Company: GeeksforGeeks, Description: A Computer Science Portal.
Cannot assign to 'name' because it is a read-only property.
Cannot assign to 'desc' because it is a read-only property.
Cricketer Name: Virat Kohli, Runs: 26000
Cannot assign to 'crktr_name' because it is a read-only property.
Cannot assign to 'runs' because it is a read-only property.

TypeScript 中 const 和 readonly 的區別

常量	隻讀
它用於聲明其值在整個代碼中不能更改的常量。	它用於創建不能重新分配的不可變類或對象屬性。
這些常量必須在聲明時用一個值進行初始化。	這些屬性可以在聲明時或在類構造函數內賦值。
使用定義的變量常量具有塊作用域。	隻讀屬性的範圍位於包含類或對象內。
它允許更改數組內的特定值，但不能更改數組引用所包含的值。	它根據您的要求將整個數組和特定元素創建為隻讀。
它可以直接用於創建具有可變屬性的常量對象。	它用於在接口的幫助下創建對象的不可變屬性。

相關用法

注：本文由純淨天空篩選整理自abhish8rzd大神的英文原創作品 Difference Between Const and Readonly in TypeScript。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。