如何在 TypeScript 中实现类常量?

typescriptserver side programmingprogramming

在本教程中,我们将学习如何在 TypeScript 中实现类常量。

任何应用程序都有一些需要被类和模块使用的共享值。这些值可以是配置参数、环境设置、错误代码或状态指示。建议使用常量来保存这些值,而不是硬编码魔法字符串。使用常量可以防止值在不同位置重复,从而使程序更易于管理。

面向对象的 JavaScript 就是 TypeScript。TypeScript 支持类、接口和其他面向对象的编程。就 OOP 而言,类是构建对象的模板。对象的数据包含在类中。TypeScript 的内置功能支持类的概念。JavaScript ES5 或之前的版本不支持类。ES6 为 TypeScript 提供了此功能。

常量是不可变的值,一旦赋值就无法更改。这些常量在成员变量中声明,类似于任何编程语言的类声明。

但是 TypeScript 不支持类级常量。类成员无法访问"const"。在 TypeScript 类声明中,有多种方法可以声明成员常量。它们是:

  • 使用 readonly 关键字
  • 使用静态只读属性常量

首先,我们将学习如何在 TypeScript 中创建类。

使用类的实例创建类

在这里,我们将使用类的实例创建一个类。我们将创建一个类,然后通过创建该类(或对象)的实例并调用任何特定数据来使用其中的数据。

语法

用户可以按照以下语法在 TypeScript 中创建一个类 -

//声明一个类
class ClassName {
    // 代码语句
}

如上语法所示,我们通过定义类名来创建一个类。

示例

在下面的示例中,我们可以看到我们创建了一个名为"Person"的类。它包含一个 PersonName 变量,其值为键入的字符串"TutorialsPoint"。然后,我们创建了一个 Person 对象,并将其存储在实例变量和控制台中,并输出 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"的类。它有两个带有 readonly 修饰符的字段 name 和 roll。这意味着我们无法在构造函数之外更新或修改这些字段的值。它将显示错误。之后,我们创建一个名为 displayResult() 的函数,使用控制台显示这些字段的值。并且该函数由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 关键字之外,我们还将使用 static 关键字,这样我们就可以直接实例化常量属性,而无需先构造特定实例。

换句话说,此类属性将保持不变,不能分配给类构造函数。为了进一步简化,我们还将在此处声明静态函数,该函数将在浏览器控制台上显示我们的结果,并且不会调用实例化。

示例

在下面的示例中,我们可以看到我们在这里创建了一个名为"Person"的类。它有一个名为 PersonName 的字段。它有一个 readonly 关键字的前缀以及 static 关键字。这意味着我们不能在构造函数外部和内部更新或修改这些字段的值。它会显示一个错误。之后,我们创建一个名为 displayName() 的函数,我们使用控制台显示字段值。这个函数由 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 字段的值。


相关文章