下一篇 → ← 上一篇 TypeScript 接口 2025年4月24日 | 阅读 8 分钟 接口在我们的应用程序中充当合同。它定义了类应该遵循的语法，这意味着实现接口的类必须实现其所有成员。我们不能实例化接口，但实现它的类的对象可以引用它。TypeScript 编译器使用接口进行类型检查（也称为“鸭子类型”或“结构化子类型”），以确定对象是否具有特定的结构。 接口仅包含方法和字段的声明，而不包含实现。我们不能用它来构建任何东西。它由类继承，实现接口的类定义了接口的所有成员。 当 TypeScript 编译器将其编译为 JavaScript 时，接口将从 JavaScript 文件中消失。因此，它的目的仅在于开发阶段提供帮助。 接口声明 我们可以按如下方式声明一个接口。 interface interface_name { // variables' declaration // methods' declaration } interface 是用于声明 TypeScript 接口的关键字。 interface_name 是接口的名称。 接口体包含变量和方法的声明。 示例 interface OS { name: String; language: String; } let OperatingSystem = (type: OS): void => { console.log('Android ' + type.name + ' has ' + type.language + ' language.'); }; let Oreo = {name: 'O', language: 'Java'} OperatingSystem(Oreo); 在上面的示例中，我们创建了一个名为 OS 的接口，该接口具有 string 类型的 name 和 language 属性。接下来，我们定义了一个带有一个参数的函数，该参数是 OS 接口的类型。 现在，将 TS 文件编译为 JS，如下所示： 示例 let OperatingSystem = (type) => { console.log('Android ' + type.name + ' has ' + type.language + ' language.'); }; let Oreo = { name: 'O', language: 'Java' }; OperatingSystem(Oreo); 编译并运行 输出 Android O has Java language. 接口的用法 我们可以使用接口执行以下操作： 验证属性的特定结构 作为参数传递的对象 从函数返回的对象。 接口继承 我们可以从其他接口继承接口。换句话说，TypeScript 允许接口继承零个或多个基类。 基类可以是类或接口。我们可以使用“extends”关键字来实现接口之间的继承。 以下示例有助于我们更清楚地理解接口继承。 语法 child_interface extends parent interface{ } 示例 interface Person { name:string age:number } interface Employee extends Person { gender:string empCode:number } let empObject = <Employee>{}; empObject.name = "Abhishek" empObject.age = 25 empObject.gender = "Male" empObject.empCode = 43 console.log("Name: "+empObject.name); console.log("Employee Code: "+empObject.empCode); 编译并运行 输出 Name: Abhishek Employee Code: 43 让我们以第一个示例为例，它有助于我们理解多接口继承。 示例 interface Person { name:string } interface PersonDetail { age:number gender:string } interface Employee extends Person, PersonDetail { empCode:number } let empObject = <Employee>{}; empObject.name = "Abhishek" empObject.age = 25 empObject.gender = "Male" empObject.empCode = 43 console.log("Name: "+empObject.name); console.log("Employee Code: "+empObject.empCode); 编译并运行 输出 Name: Abhishek Employee Code: 43 输出 数组类型接口 我们还可以使用接口来描述数组类型。以下示例有助于我们理解数组类型接口。 示例 // Array which return string interface nameArray { [index:number]:string } // use of the interface let myNames: nameArray; myNames = ['Virat', 'Rohit', 'Sachin']; // Array which return number interface ageArray { [index:number]:number } var myAges: ageArray; myAges =[10, 18, 25]; console.log("My age is " +myAges[1]); 编译并运行 在上面的示例中，我们声明了返回 string 的 nameArray 和返回 number 的 ageArray。数组中索引的类型始终为 number，因此我们可以使用数组的索引位置来检索数组元素。 输出 My age is 18 类中的接口 TypeScript 还允许我们在类中使用接口。类通过使用 implements 关键字来实现接口。我们可以通过下面的示例来理解这一点。 示例 // defining interface for class interface Person { firstName: string; lastName: string; age: number; FullName(); GetAge(); } // implementing the interface class Employee implements Person { firstName: string; lastName: string; age:number; FullName() { return this.firstName + ' ' + this.lastName; } GetAge() { return this.age; } constructor(firstN: string, lastN: string, getAge: number) { this.firstName = firstN; this.lastName = lastN; this.age = getAge; } } // using the class that implements interface let myEmployee = new Employee('Abhishek', 'Mishra', 25); let fullName = myEmployee.FullName(); let Age = myEmployee.GetAge(); console.log("Name of Person: " +fullName + '\nAge: ' + Age); 编译并运行

在上面的示例中，我们声明了 Person 接口，其中 firstName、lastName 作为属性，FullName 和 GetAge 作为方法/函数。Employee 类通过使用 implements 关键字来实现此接口。实现接口后，我们必须在类中声明属性和方法。如果我们不实现这些属性和方法，它将引发编译时错误。我们还在类中声明了一个构造函数。因此，当我们实例化类时，我们需要传递必要的参数，否则它会在编译时引发错误。

输出

Name of Person: Abhishek Mishra
Age: 25

函数类型

函数类型可以在 TypeScript 接口中定义函数的形状。它允许您定义参数的类型以及应该返回的函数类型。它提供了类型安全的函数分配给接口类型变量。

输出

Adding numbers: 5 + 3
Result after addition: 8
Sum is 8

说明

Add 接口期望一个函数，该函数接受两个数字并返回一个数字。这是 sum 的正确类型签名。

可选属性

然而，第二行有一个可选属性作为接口的一部分，这意味着您可以创建像这样的行：{name: Alice } 或 {name: Bob, age: 30}，因此它不是强制性的。使用? 符号来标记它们。当某些值可能不会每次都提供时，它很有用。

输出

User 1 Details: { name: 'Alice' }
User 2 Details: { name: 'Bob', age: 30 }

说明

age 属性是可选的。但是 user1 在没有该属性的情况下也是有效的，user2 包含两个属性。它对于设计可变数据结构很有用。

只读属性

只读属性允许您在对象创建后不修改属性。这通过使用 readonly 关键字强制执行。这对于设置在应用程序生命周期中不应更改的任何常量值很有用。

输出

error TS2540: Cannot assign to 'brand' because it is a read-only property.

说明

brand 属性上的 readonly 修饰符意味着在其对象初始化后，其值不能被修改，从而保留了 brand 所代表的属性的不可变性。

索引签名

强制动态键限制的一种方法是通过索引签名来表示接口可以使用许多可变键来表示对象。要指定键的类型及其相应的值，请使用 [key: type]: valueType。

输出

Student Scores: { Math: 95, Science: 88 }
Math Score: 95
Science Score: 88

说明

Scores 接口可以用任何字符串键和数字值进行初始化。例如，当您拥有键未知的数据时，这非常方便。

泛型接口

泛型接口允许您编写泛型代码，以便您可以重用多种数据类型的代码。您使用类型参数定义接口的结构，以避免直接使用 any。这鼓励了类型安全和代码重用。

输出

Container Value: 42
Retrieved using getValue(): 42

说明

Container 接口中的类型参数 T，其中在使用它时将 T 指定为数字。这使得 Flexi 可以应用于任何数据类型，如 string、boolean 等。

接口和继承之间的区别

常见问题

1. TypeScript 中的接口是什么？

在 TypeScript 中，接口是实体应遵循的语法合同。它描述了对象应具有的属性和方法，而不实现它们。

2. 接口可以用于类型检查吗？

绝对可以，接口主要用于类型检查。它们在编译时强制对象和类遵循特定的结构。

3. 接口和类型在 TypeScript 中有什么区别？

接口和类型在 TypeScript 中都用于定义对象的结构。接口是语法合同，而类型是数据类型的集合。接口的灵活性较低，而类型的灵活性较高。两者都可以描述对象形状，但接口在声明合并方面比类型功能更强，并且通常用于 OOP 中创建合同。

4. 接口可以扩展另一个接口吗？

是的，接口可以扩展一个或多个接口。它支持结构化继承和代码模式重用。

5. 接口会被编译成 JavaScript 吗？

不，接口仅在开发和类型检查时存在。这些不会出现在编译后的 JavaScript 输出中。