¿Cómo extender una interfaz de una clase en TypeScript?

En este artículo, intentaremos comprender cómo extender una interfaz de una clase en TypeScript con la ayuda de ciertos ejemplos de codificación. Primero, comprendamos rápidamente cómo podemos crear una clase y una interfaz en TypeScript usando las siguientes sintaxis mencionadas:

Sintaxis: 

Esta es la sintaxis para crear una clase. Podemos usar la siguiente sintaxis para crear una clase en TypeScript:

class class_name {
    ...
}

Esta es la sintaxis para crear una interfaz. Podemos usar la siguiente sintaxis para crear una interfaz en TypeScript:

interface interface_name {
    ...
}

Ahora que hemos entendido las sintaxis básicas para crear una clase y una interfaz, comprendamos esas sintaxis junto con el objetivo principal de cómo podríamos extender una interfaz de una clase con la ayuda de los siguientes ejemplos de codificación:

Ejemplo 1:

  • En este ejemplo, se definirá una clase que tendrá alguna variable definida dentro de ella.
  • Luego, se construiría una interfaz que extendería la clase anterior y dentro de esa interfaz, se definiría un método declarado, pero su definición se definiría más adelante en alguna clase diferente.
  • Luego se creará otra clase que se encargará de extender la clase padre junto con la interfaz así definida.
  • A partir de entonces, para esta clase derivada, se creará una instancia de un objeto y se utilizará más para imprimir el resultado que se define dentro del método, y ese método se define en la clase derivada cuya declaración se proporciona en la propia interfaz.

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();

Producción:

GeeksforGeeks

Ejemplo 2:

  • En este ejemplo, se crea una clase que se infiere como la clase principal que tiene diferentes declaraciones de variables dentro de ella.
  • A partir de entonces, se definirían dos interfaces (o múltiples interfaces), cada una conteniendo declaraciones de métodos separados dentro de ellos, cuyas definiciones se definirán más adelante dentro de una clase separada (que se infiere como una clase derivada).
  • A partir de entonces, se crea una clase derivada que es responsable de extender la clase principal, así como las interfaces definidas.
  • Luego, por fin, se crea una instancia de un objeto que es responsable de llamar a todos los métodos que están definidos en la clase derivada que eventualmente contendrá el resultado.

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();

Producción:

1 - Apple
2 - Banana

Publicación traducida automáticamente

Artículo escrito por amansingla y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *