TypeScript接口的用法详解 – TypeScript开发教程

上一章TypeScript教程请查看：TypeScript类的继承介绍

接口是在我们的应用程序中充当契约的结构。它定义了要遵循的类的语法，意味着实现接口的类必须实现它的所有成员。我们不能实例化接口，但是实现它的类对象可以引用它。无论对象是否具有特定的结构，TypeScript编译器都使用接口进行类型检查(也称为“duck typing”鸭子类型或“结构化子类型”)。

接口只包含方法和字段的声明，而不包含实现。我们不能用它来建造任何东西。它由一个类继承，实现接口的类定义接口的所有成员。

当Typescript编译器将其编译成JavaScript时，该接口将从JavaScript文件中消失。因此，其目的只是在开发阶段提供帮助。

接口声明

我们可以像下面这样声明一个接口。

interface interface_name {  
          // 变量声明 
          // 方法声明
}  

• 接口是用于声明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。接下来，我们定义了一个带有一个参数的函数，它是接口OS的类型。

现在，将TS文件编译成JS，如下面的输出所示。

let OperatingSystem = (type) => {  
    console.log('Android ' + type.name + ' has ' + type.language + ' language.');  
};  
let Oreo = { name: 'O', language: 'Java' };  
OperatingSystem(Oreo);  

使用接口

我们可以使用接口做以下事情:

• 验证属性的特定结构
• 作为参数传递的对象
• 从函数返回的对象。

接口继承

我们可以从其他接口继承接口。换句话说，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 = "Oreja"  
empObject.age = 15   
empObject.gender = "Female"  
empObject.empCode = 43  
console.log("Name: "+empObject.name);  
console.log("Employee Code: "+empObject.empCode);  

让我们以上面的例子为例，它帮助我们理解多接口继承。

例子

interface Person {   
   name:string    
}  
interface PersonDetail {   
    age:number  
    gender:string  
}  
interface Employee extends Person, PersonDetail {   
    empCode:number  
}  
let empObject = <Employee>{};   
empObject.name = "Van"  
empObject.age = 16
empObject.gender = "Female"  
empObject.empCode = 43  
console.log("Name: "+empObject.name);  
console.log("Employee Code: "+empObject.empCode);  

数组类型的接口

我们还可以使用接口来描述数组类型。下面的示例帮助我们理解数组类型接口。

例子

// 返回字符串的数组 
interface nameArray {  
    [index:number]:string  
}  
// 接口的使用
let myNames: nameArray;  
myNames = ['AAA', 'BBB', 'CCC'];  
  
// 返回数字的数组  
interface ageArray {  
    [index:number]:number  
}  
var myAges: ageArray;  
myAges =[10, 18, 25];  
console.log("My age is: " +myAges[1]);  

在上面的例子中，我们声明了返回字符串的nameArray和返回数字的ageArray。数组中的索引类型总是number，这样我们就可以使用它在数组中的索引位置来检索数组元素。

类中的接口

TypeScript还允许我们在类中使用接口，类通过使用implements关键字实现接口。我们可以通过下面的例子来理解它。

例子

// 为类定义接口 
interface Person {  
    firstName: string;  
    lastName: string;  
    age: number;  
    FullName();  
    GetAge();  
}  
// 实现接口
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;  
    }  
}  
// 使用实现接口的类  
let myEmployee = new Employee('AA', 'BB', 11);  
let fullName = myEmployee.FullName();  
let Age = myEmployee.GetAge();  
console.log("Name of Person: " +fullName + '\nAge: ' + Age);  

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

接口和继承之间的区别