数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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
以下示例演示了创建 wall 接口并将其实现到 wallDetails 类中。
此外，我们创建了 wallDetails 类的 wall1 对象，其 wall_id 为 1。当我们以 wall1 对象为参考调用 get_size() 和 get_wall_message() 方法时，用户可以观察输出。
// 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());
编译后，它将生成以下 JavaScript 代码 -
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 接口，其中包含 card_size、gradient 和 card_phone_No 属性。gradient 属性是可选的，以便我们可以在没有 gradient 的情况下创建 card 类型的对象。card_phone_No 是一个只读属性，这意味着我们无法修改该属性。
我们创建了类型为 card 的 card_obj1，其中包含所有 3 个属性及其值。此外，我们创建了类型为 card 的 card_ob2，它不包含 gradient 属性，但它仍然可以成功编译，因为 gradient 是可选的。
// 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 的 gradient 属性的值为 undefined。
编译后，它将生成以下 JavaScript 代码 -
// 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);
编译后，它将生成以下 JavaScript 代码 -
// 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 中使用接口和类。
2K+ 浏览量
