当前位置：极客教程 > TypeScript > TypeScript 教程 > TypeScript 使用接口与类

TypeScript 使用接口与类

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;
   }
}
TypeScript

步骤

  • 第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());
TypeScript
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());
TypeScript

输出

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

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

示例 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
);
TypeScript

在输出中，我们可以看到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);
TypeScript

输出

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

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

示例 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);
TypeScript
// 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);
TypeScript

输出

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

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

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

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

TypeScript 教程

登录

找回密码？

注册