📜  如何从 TypeScript 中的类扩展接口?

📅  最后修改于: 2022-05-13 01:56:44.807000             🧑  作者: Mango

如何从 TypeScript 中的类扩展接口?

在本文中,我们将尝试通过某些编码示例来了解如何从 TypeScript 中的类扩展接口。首先让我们快速了解如何使用以下提到的语法在 TypeScript 中创建类和接口:

句法:

这是创建类的语法。我们可以使用以下语法在 TypeScript 中创建一个类:

class class_name {
    ...
}

这是创建接口的语法。我们可以使用以下语法在 TypeScript 中创建接口:

interface interface_name {
    ...
}

现在我们已经了解了创建类和接口的基本语法,让我们了解这些语法以及如何借助以下编码示例从类扩展接口的主要目标:

示例 1:

  • 在此示例中,将定义一个类,其中将定义一些变量。
  • 然后将构造一个接口,该接口将扩展上述类,并且在该接口内,将定义一个方法,但其定义将在稍后在某个不同的类中定义。
  • 然后将创建另一个类,该类负责扩展父类以及如此定义的接口。
  • 此后,对于这个派生类,将实例化一个对象并将其用于进一步打印在方法内部定义的结果,并且该方法在派生类中定义,其声明在接口本身中提供。
Javascript
// Parent class creation
class Person {
    public name: string;
}
  
// Interface extended from the above class
interface Details extends Person {
    details(): void;
}
  
// Using the above illustrated interface and class together
class Person_Details extends Person implements Details {
    details(): void {
        this.name = "GeeksforGeeks";
        console.log(this.name);
    }
}
  
let object = new Person_Details();
object.details();


Javascript
// Parent class declaration
class Student {
    public id: number;
    public name: string;
}
  
// Creating multiple interfaces which 
// will extend the above class
interface Student_1 extends Student {
    student1_details(): void;
}
  
interface Student_2 extends Student {
    student2_details(): void;
}
  
// Creating a class which will extend
// the above interfaces 
class Student_Details extends Student implements Student_1, Student_2 {
    student1_details(): void {
        this.name = "Apple";
        this.id = 1;
        console.log(this.id + " - " + this.name);
    }
  
    student2_details(): void {
        this.name = "Banana";
        this.id = 2;
        console.log(this.id + " - " + this.name);
    }
}
  
let student_object = new Student_Details();
student_object.student1_details();
student_object.student2_details();


输出:

GeeksforGeeks

示例 2:

  • 在此示例中,创建了一个被推断为父类的类,该类在其中具有不同的变量声明。
  • 此后,将定义两个接口(或多个接口),每个接口都在其中包含单独的方法声明,其定义将在稍后在单独的类(被推断为派生类)中定义。
  • 之后创建一个派生类,它负责扩展父类以及定义的接口。
  • 最后,实例化一个对象,该对象负责调用派生类中定义的所有方法,派生类最终将包含结果。

Javascript

// Parent class declaration
class Student {
    public id: number;
    public name: string;
}
  
// Creating multiple interfaces which 
// will extend the above class
interface Student_1 extends Student {
    student1_details(): void;
}
  
interface Student_2 extends Student {
    student2_details(): void;
}
  
// Creating a class which will extend
// the above interfaces 
class Student_Details extends Student implements Student_1, Student_2 {
    student1_details(): void {
        this.name = "Apple";
        this.id = 1;
        console.log(this.id + " - " + this.name);
    }
  
    student2_details(): void {
        this.name = "Banana";
        this.id = 2;
        console.log(this.id + " - " + this.name);
    }
}
  
let student_object = new Student_Details();
student_object.student1_details();
student_object.student2_details();

输出:

1 - Apple
2 - Banana