📌  相关文章
📜  TypeScript接口

📅  最后修改于: 2021-01-11 12:47:27             🧑  作者: Mango

TypeScript接口

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

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

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

接口声明

我们可以如下声明一个接口。

interface interface_name {
          // variables' declaration
          // methods' declaration
}
  • 接口是用于声明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 = {}; 
empObject.name = "Abhishek"
empObject.age = 25 
empObject.gender = "Male"
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 = {}; 
empObject.name = "Abhishek"
empObject.age = 25 
empObject.gender = "Male"
empObject.empCode = 43
console.log("Name: "+empObject.name);
console.log("Employee Code: "+empObject.empCode);

输出：

阵列类型接口

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

例

// 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]);

在上面的例子中，我们已经宣布nameArray回返字符串和ageArray回返数。数组中索引的类型始终是数字，因此我们可以利用其在数组中的索引位置来检索数组元素。

输出：

类中的接口

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作为method / 函数 。 Employee类通过使用Implements关键字实现此接口。实现接口后，我们必须在类中声明属性和方法。如果我们不实现这些属性和方法，则会引发编译时错误。我们还在类中声明了一个构造函数。因此，当我们实例化该类时，我们需要传递必要的参数，否则它将在编译时引发错误。

输出：

接口和继承之间的区别

SN Interface Inheritance
1. An Interface is a structure which acts as a contract in our application. It defines the required functions, and the class is responsible for implementing it to meet that contract. Inheritance is object-oriented programming that allows similar objects to inherit the functionality and data from each other.
2. In an interface, we can only declare properties and methods. In inheritance, we can use a superclass to declare and defines variables and methods.
3. An interface type objects cannot declare any new methods or variables. In this, we can declare and define its own variables and methods of a subclass that inherits a superclass.
4. Interface enforces the variables and methods which have to be present in an object. A subclass extends the capability of a superclass to suit the “custom” needs.
5. Interface are classes that contain body-less structure (abstract or virtual functions). So, we have to derive the interface and then implement all of the functions in the subclass. Inheritance is the process where one subclass acquires the properties of its superclass.