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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。