如何在 TypeScript 中使用接口和类?
在 TypeScript 中，类是定义变量和方法的模板。我们可以使用类模板创建对象，这意味着类是面向对象编程中可重用的组件，我们可以通过创建其对象来重用它。
在 TypeScript 中，我们可以使用"interface"关键字定义接口。接口包含类结构。接口类似于我们在其他编程语言(例如 Java 和 C++)中定义的抽象类。它仅包含变量及其类型的声明以及方法及其返回类型和参数类型的声明。类定义接口的方法并初始化接口中声明的变量的值。
在 TypeScript 中使用类实现接口
在本节中，我们将学习如何使用类创建和实现接口。我们可以使用 implements 关键字来实现任何带有类的接口。
语法
在下面的语法中，我们创建了接口和类。此外，我们还展示了将接口实现到类的语法。
interface Wall {
// 变量和方法声明
color: string;
get_size: () => number;
}
class WallDetails implements Wall {
// 定义变量和方法
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 对象，其 wall_id 为 1。当我们以 wall1 对象为引用调用 get_size() 和 get_wall_message() 方法时，用户可以观察输出。
// 定义墙体接口
interface Wall {
// 变量和方法声明
wall_id: number;
get_size: (wall_id: number) => number;
get_wall_message: () => string;
}
class WallDetails implements Wall {
// 定义变量和方法
wall_id: number;
// 用于初始化变量的构造函数
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 () {
// 构造函数来初始化变量
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 属性。gradient 属性是可选的，因此我们可以创建不包含渐变的卡片类型对象。card_phone_No 是只读属性，这意味着我们无法修改该属性。
我们创建了 card 类型的 card_obj1，它包含所有 3 个属性及其值。此外，我们还创建了 card 类型的 card_ob2，它不包含渐变属性，但由于渐变是可选的，因此它仍然可以成功编译。
// 创建包含 card_size、gradient 和 card_phone_No 属性的卡片接口
interface card {
card_size: number;
gradient?: string;
readonly card_phone_No: number;
}
// 定义具有所有 3 个属性的 card_obj1
let card_obj1: card = {
card_size: 20,
gradient: "black-white",
card_phone_No: 92323232332,
};
// 定义 card_obj2 对象时，由于它是可选的，因此不包含渐变属性
let card_obj2: card = {
card_size: 10,
card_phone_No: 446189746464,
};
// card_obj1.card_phone_No = 2398456456657 // 这会报错，因为 card_phone_No 是只读的，我们无法修改它。
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 的渐变属性值未定义。
编译后，它将生成以下 JavaScript 代码 -
// 定义具有所有 3 个属性的 card_obj1
var card_obj1 = {
card_size: 20,
gradient: "black-white",
card_phone_No: 92323232332
};
// 定义 card_obj2 对象时，由于它是可选的，因此不包含渐变属性。
var card_obj2 = {
card_size: 10,
card_phone_No: 446189746464
};
// card_obj1.card_phone_No = 2398456456657 // 这会报错，因为 card_phone_No 是只读的，我们无法修改它。
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() 函数。
// 将接口定义为函数类型
interface function_type {
// 函数接受两个参数:字符串和布尔值，并返回 void
(param1: string, param2: boolean): void;
}
// func1 打印参数值
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 的类型为 function_type 接口，并赋值了 func1 函数
let func_variable: function_type = func1;
// 我们可以通过 func_variable 调用 func1()
func_variable("TutorialsPoint", true);
编译后，它将生成以下 JavaScript 代码 -
// func1 打印参数值
function func1(param1, param2) {
console.log("The value of param1 is " + param1);
console.log("The value of the param2 is " + param2);
}
// func_variable 的类型为 function_type 接口，并赋值了 func1 函数
var func_variable = func1;
// 我们可以通过 func_variable 调用 func1()
func_variable("TutorialsPoint", true);
输出
上述代码将产生以下输出 -
The value of param1 is TutorialsPoint The value of the param2 is true
在本教程中，我们学习了如何在 TypeScript 中使用带有类的接口。
