TypeScript 作为 JavaScript 的一个超集，提供了更加强大的类型检查和抽象能力，其中接口（interface）是 TypeScript 中的一个重要概念之一。本文将深入探讨 TypeScript 中的接口，让读者更好地理解和使用它。
接口的定义和作用
接口定义了一个规范，用于描述数据的类型和结构。在代码中使用接口可以让开发者更好地控制数据的流动和处理，从而减少出错的机会。
在 TypeScript 中，可以使用 interface 关键字定义接口，例如：
interface User {
id: number;
name: string;
age: number;
}上面的例子定义了一个名为 User 的接口，其中包含了 id（数字类型）、name（字符串类型）和 age（数字类型）三个成员，分别表示用户的标识、姓名和年龄。
接口的使用
1. 对象形式
使用接口定义一个对象，可以约定该对象的属性名和属性值的类型，从而更好地控制数据的流动。例如：
-- -------------------- ---- ------- --------- ------ - ------ ------- ------- ------- - -------- ---------- ------- - ------ ------- - --------- - ----- --------- - - ------ --- ------- -- -- -------------------------------- -- -----
上面的例子中，定义了一个名为 Square 的接口，其中包含了两个成员 width 和 height，分别表示矩形的宽和高。getArea 函数接收一个 Square 类型的参数，并计算并返回矩形的面积。最后通过 rectangle 对象来调用该函数，计算出矩形的面积，并输出到控制台。
2. 函数形式
使用接口定义一个函数，可以约定该函数的参数类型和返回值类型，从而更好地控制数据的流动。例如：
-- -------------------- ---- ------- --------- ------ - ------- --------- -------- -------- --------- - ----- ------- ------ - ------- -------- -- - ------ ----------------- -- ------------------------ -- ----- ----- - --------- ------ ---------- --------- ------------------------- ------ -- ------------------------------
上面的例子中，定义了一个名为 Filter 的接口，它表示一个接收两个参数的函数，第一个参数是一个字符串数组，第二个参数是一个字符串，函数返回值也是一个字符串数组。通过定义这个接口，我们可以约束 filter 函数的参数和返回值类型。
可选属性
使用接口定义对象时，有时候某个属性并不是必需的，可以使用 ? 来表示该属性是可选的。例如：
-- -------------------- ---- ------- --------- ------ - ----- ------- ----- ------- - ----- --- ------ - - ----- -------- -- ----- --- ------ - - ----- ------ ---- --- --
上面的例子中，定义了一个名为 Person 的接口，它有两个成员：name 和 age，其中 age 成员是可选的。可以看到，声明 p1 时没有指定 age 属性，而声明 p2 时指定了 age 属性。
只读属性
使用接口定义对象时，有时候某个属性是只读的，可以使用 readonly 关键字来表示该属性只能在定义时被赋值。例如：
-- -------------------- ---- ------- --------- ----- - -------- -- ------- -------- -- ------- - ----- ------ ----- - - -- --- -- --- -- --------------------- -- ----- ------- - -- -- ----- ------- ------ ------ -- --- ------- -- -- - --------- ---------
上面的例子中，定义了一个名为 Point 的接口，它有两个只读成员：x 和 y，分别表示点的横坐标和纵坐标。声明 point 变量时，只能指定 x 和 y 的初始值，不能在后续代码中修改 x 和 y 的值。
继承接口
使用接口时，有时候一个接口需要继承自另外一个接口，可以使用 extends 关键字来实现。例如：
-- -------------------- ---- ------- --------- ------ - ----- ------- - --------- --- ------- ------ - ------ ------- - ----- ---- --- - - ----- -------- ------ ----------- -- ---------------------- -- -------- ----------------------- -- -----------
上面的例子中，定义了一个名为 Animal 的接口，它只有一个成员 name。然后定义了一个名为 Dog 的接口，它继承自 Animal 接口，并新增加了一个成员 breed，表示狗的品种。声明 dog 变量时，需要指定 name 和 breed 的值。
声明合并
使用接口时，有时候多个接口中包含同名成员，可以使用声明合并来将它们合并成一个接口。例如：
-- -------------------- ---- ------- --------- - - -- ------- -- ------- - --------- - - -- ------- - ----- -- - - - -- -- -- -- -- -- --
上面的例子中，定义了两个名为 A 的接口，它们分别包含不同的成员。声明 a 变量时，需要同时包含 x、y 和 z 三个成员。
总结
本文介绍了 TypeScript 中接口的定义和作用，以及接口的使用方法，包括对象形式、函数形式、可选属性、只读属性、继承接口和声明合并等内容。在实际开发中，我们可以灵活地使用接口，提高代码的可读性、可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450ed6d980a9b385b9cb282