如何在TypeScript中實現類常量？

---

在本教程中，我們將學習如何在TypeScript中實現類常量。

任何應用程式都有一些共享值，需要被類和模組使用。這些值可能是配置引數、環境設定、錯誤程式碼或狀態指示。建議使用常量來儲存這些值，而不是硬編碼魔術字串。使用常量可以使程式更易於管理，避免在不同位置重複使用相同的值。

面向物件的JavaScript是TypeScript的基礎。TypeScript支援類、介面和其他面向物件程式設計的概念。在OOP中，類是構建物件的模板。物件的數 據包含在類中。TypeScript的內建特性支援類概念。JavaScript ES5及之前的版本不支援類。ES6為TypeScript提供了此功能。

常量是不可變的值，一旦賦值就不能更改。它們在成員變數中宣告，類似於任何程式語言的類宣告。

但是TypeScript不支援類級別的常量。“const”不能用於類成員。在TypeScript類宣告中，有多種方法可以宣告成員常量。它們是：

• 使用`readonly`關鍵字
• 使用靜態`readonly`屬性常量

首先，我們將學習如何在TypeScript中建立類。

使用類的例項建立類

在這裡，我們將使用類的例項來建立一個類。我們將建立一個類，然後透過建立類的例項（或物件）並呼叫任何特定資料來使用其中的資料。

語法

使用者可以按照以下語法在TypeScript中建立類：

//Declaring a class
class ClassName {
   // Statement of codes
}

如上語法所示，我們透過定義類名來建立類。

示例

在下面的示例中，我們可以看到我們建立了一個名為“Person”的類。它有一個名為PersonName的變數，其值為型別為字串的“TutorialsPoint”。然後我們建立了一個person物件，將其儲存在例項變數中，並使用console.log列印PersonName變數的值。

class Person {
   PersonName: string = "TutorialsPoint"
}
let instance = new Person();
console.log(instance.PersonName);

編譯後，它將生成以下JavaScript程式碼：

var Person = /** @class */ (function () {
   function Person() {
      this.PersonName = "TutorialsPoint";
   }
   return Person;
}());
var instance = new Person();
console.log(instance.PersonName);

輸出

以上程式碼將產生以下輸出：

TutorialsPoint

在輸出中，使用者可以看到它顯示了PersonName變數的值，我們使用例項來呼叫它。

使用`readonly`關鍵字

此方法將使用前面顯示的相同語法建立類。在這裡，我們將使用`readonly`關鍵字，這將幫助我們使該特定欄位的值不可更改。同樣，如果我們嘗試修改該值，使用者瀏覽器控制檯將顯示錯誤響應。

示例

在下面的示例中，我們可以看到我們建立了一個名為'Person'的類。它有兩個欄位：name和roll，都使用了`readonly`修飾符。這意味著我們不能在建構函式外部更新或修改這些欄位的值。它將顯示錯誤。之後，我們建立了一個名為displayResult()的函式，使用console.log顯示這些欄位的值。此函式由Person類的例項呼叫。

class Person{
   readonly name : string = "XYZ";
   readonly roll : number = 20;
   displayResult() : void{
      console.log(this.name);
      console.log(this.roll);
   }
}
  
let instance = new Person();
instance.displayResult();

編譯後，它將生成以下JavaScript程式碼：

var Person = /** @class */ (function () {
   function Person() {
      this.name = "XYZ";
      this.roll = 20;
   }
   Person.prototype.displayResult = function () {
      console.log(this.name);
      console.log(this.roll);
   };
   return Person;
}());
var instance = new Person();
instance.displayResult();

輸出

以上程式碼將產生以下輸出：

XYZ
20

在上面的輸出中，使用者可以看到控制檯顯示了Person類中兩個欄位name和roll的值。

使用靜態`readonly`屬性常量

在此方法中，除了`readonly`關鍵字之外，我們還將使用`static`關鍵字，這允許我們直接例項化常量屬性，而無需首先構造特定的例項。

換句話說，此類屬性將保持不變，並且不能賦值給類建構函式。為了更簡單，我們還將在此處宣告靜態函式，該函式將在瀏覽器控制檯中顯示我們的結果，並且不會呼叫例項化。

示例

在下面的示例中，我們可以看到我們建立了一個名為‘Person’的類。它有一個名為PersonName的欄位。它帶有`readonly`關鍵字和`static`關鍵字。這意味著我們不能在建構函式內部和外部更新或修改這些欄位的值。它將顯示錯誤。之後，我們建立了一個名為displayName()的函式，我們使用console.log顯示欄位值。此函式由Person類呼叫。

class Person {
   static readonly PersonName : string = "TutorialsPoint";
   static Displayname() : void {

      console.log(Person.PersonName);
   }
}
Person.Displayname();

編譯後，它將生成以下JavaScript程式碼：

var Person = /** @class */ (function () {
   function Person() {
   }
   Person.Displayname = function () {
      console.log(Person.PersonName);
   };
   Person.PersonName = "TutorialsPoint";
   return Person;
}());
Person.Displayname();

輸出

以上程式碼將產生以下輸出：

TutorialsPoint

在上面的輸出中，使用者可以看到控制檯顯示了Person類中PersonName欄位的值。