TypeScript 使用接口与类

在TypeScript中，类是定义变量和方法的模板。我们可以使用类模板来创建对象，这意味着类是面向对象编程中可重用的组件，我们可以通过创建其对象来重用它。

我们可以使用 “interface “关键字来定义TypeScript中的接口。接口包含了类的结构。接口类似于我们在其他编程语言中定义的抽象类，如Java和C++。它只包含变量的声明与它们的类型和方法与它的返回类型和参数类型。类定义了接口的方法并初始化了接口中声明的变量的值。

在TypeScript中用类实现接口

在本节中，我们将学习如何用类来创建和实现接口。我们可以使用 implements 关键字来实现任何带有类的接口。

语法

在下面的语法中，我们已经创建了接口和类。此外，我们还展示了将接口实现到类中的语法。

interface Wall {
   // variable and method declaration
   color: string;
   get_size: () => number;
}

class WallDetails implements Wall {
   // defining the variables and methods
   color = "#434322";
   get_size() {
      return 20;
   }
}

步骤

• 第1步 – 首先，创建Wall界面，其中包含wall_id和color变量声明。

• 第2步 – 声明get_size()方法，该方法以wall_id为参数并返回数字。

• 第3步 – 声明get_wall_message()方法不接受单一参数，但返回字符串。

• 第4步 – 定义名为walllDetails的类，并使用 implements关键字将Wall接口实现到wallDetails类中。在wallDetails类中，使用构造函数初始化wall_id和color变量。

• 第5步 – 接下来，定义get_size()方法，该方法根据它作为参数得到的wall_id值返回墙的大小。同时，实现get_wall_size()方法，它总是返回同一个字符串信息。

示例 1

下面的例子演示了墙体接口的创建及其对wallDetails类的实现。

此外，我们已经创建了wallDetails类的wall1对象，它的id是1。 用户可以观察到当我们调用get_size()和get_wall_message()方法时，以wall1对象为参考的输出。

// defining the wall interface
interface Wall {
   // variable and method declaration
   wall_id: number;
   get_size: (wall_id: number) => number;
   get_wall_message: () => string;
}

class WallDetails implements Wall {
   // defining the variables and methods
   wall_id: number;
   // constructor to initialize the variables
   constructor(wall_id: number) {
      this.wall_id = wall_id;
   }

   get_size(wall_id: number): number {
      if (wall_id < 10) {
         return 10;
      } else if (wall_id > 10 && wall_id < 50) {
         return 50;
      }
      return 100;
   }

   get_wall_message(): string {
      return "Don't draw pictures on the wall!";
   }
}

let wall1 = new WallDetails(1);
console.log("The size of the wall1 is " + wall1.get_size(wall1.wall_id));
console.log("The message of the wall1 is " + wall1.get_wall_message());

var WallDetails = /** @class */ (function () {
   // constructor to initialize the variables
   function WallDetails(wall_id) {
      this.wall_id = wall_id;
   }
   WallDetails.prototype.get_size = function (wall_id) {
      if (wall_id < 10) {
         return 10;
      }
      else if (wall_id > 10 && wall_id < 50) {
         return 50;
      }
      return 100;
   };
   WallDetails.prototype.get_wall_message = function () {
      return "Don't draw pictures on the wall!";
   };
   return WallDetails;
}());
var wall1 = new WallDetails(1);
console.log("The size of the wall1 is " + wall1.get_size(wall1.wall_id));
console.log("The message of the wall1 is " + wall1.get_wall_message());

输出

上述代码将产生以下输出 —

The size of the wall1 is 10
The message of the wall1 is Don't draw pictures on the wall!

示例 2

在下面的例子中，我们定义了卡片接口，其中包含了card_size, gradient, 和card_phone_No属性。梯度属性是可选的，这样我们就可以创建没有梯度的卡片类型对象。card_phone_No是一个只读属性，这意味着我们不能修改该属性。

我们创建了类型为card的card_obj1，它包含了所有3个属性和它的值。同时，我们创建了card_ob2类型的卡片，它不包含梯度属性，但由于梯度是可选的，所以仍然编译成功了。

// Creating the card interface containing the card_size, gradient, and card_phone_No properties
interface card {
   card_size: number;
   gradient?: string;
   readonly card_phone_No: number;
}

// defining the card_obj1 with all 3 properties
let card_obj1: card = {
   card_size: 20,
   gradient: "black-white",
   card_phone_No: 92323232332,
};

//  defining the card_obj2 object without gradient property as it is an optional
let card_obj2: card = {
   card_size: 10,
   card_phone_No: 446189746464,
};

// card_obj1.card_phone_No = 2398456456657 // this gives an error as card_phone_No is read only, we can't modify it.

console.log(
"Printing the card_obj2 details  
" +
   "Card size: " + card_obj2.card_size +
   "  
Phone No : " + card_obj2.card_phone_No +
   "  
gradient: " +card_obj2.gradient
);

在输出中，我们可以看到card_ob2的梯度属性的值是未定义的。

// defining the card_obj1 with all 3 properties
var card_obj1 = {
   card_size: 20,
   gradient: "black-white",
   card_phone_No: 92323232332
};

//  defining the card_obj2 object without gradient property as it is an optional
var card_obj2 = {
   card_size: 10,
   card_phone_No: 446189746464
};

// card_obj1.card_phone_No = 2398456456657 // this gives an error as card_phone_No is read only, we can't modify it.
console.log("Printing the card_obj2 details  
" +
   "Card size: " + card_obj2.card_size +
   "  
Phone No : " + card_obj2.card_phone_No +
   "  
gradient: " + card_obj2.gradient);

输出

上述代码将产生以下输出 —

Printing the card_obj2 details
Card size: 10
Phone No : 446189746464
gradient: undefined

示例 3

在下面的例子中，我们定义了接口func_type，它包含了单个函数的结构。之后，我们定义了func1()变量，它将字符串作为第一个参数，布尔值作为第二个参数，并打印出参数值。

之后，我们创建了function_type类型的func_variable，并将func1作为其值。之后，我们使用func_variable调用func1()函数。

// defining the interface as a function type
interface function_type {
   // function takes two parameters; string and boolean and returns void
   (param1: string, param2: boolean): void;
}

// func1 prints the parameter values
function func1(param1: string, param2: boolean): void {
   console.log("The value of param1 is " + param1);
   console.log("The value of the param2 is " + param2);
}

// func_variable is of type function_type interface and assigned the func1 function
let func_variable: function_type = func1;

// we can call func1() via func_variable
func_variable("TutorialsPoint", true);

// func1 prints the parameter values
function func1(param1, param2) {
   console.log("The value of param1 is " + param1);
   console.log("The value of the param2 is " + param2);
}

// func_variable is of type function_type interface and assigned the func1 function
var func_variable = func1;

// we can call func1() via func_variable
func_variable("TutorialsPoint", true);

输出

上述代码将产生以下输出 —

The value of param1 is TutorialsPoint
The value of the param2 is true

在本教程中，我们学习了如何在TypeScript中使用一个带有类的接口。