Interfaces en TypeScript con un ejemplo

La interfaz es una de las características más útiles de TypeScript, ya que nos ayuda a escribir código estructurado y explícito.

Te permite describir una estructura mediante campos sin valores o métodos sin implementación, obligando a los objetos y a las clases a respetar ese contrato.

La interfaz como tipo

Las interfaces se crean con la palabra clave interface y contienen el plano o estructura base de un objeto. Por ejemplo, en una suscripción podemos definir sus propiedades y métodos.

Además, nos permiten marcar propiedades o métodos como opcionales agregando un signo de interrogación (?) después del nombre del método o la propiedad.

interface Subscription {
	readonly: id;
	url?: string;
	name: string;
	sign() ?: string;
}

Usando la interfaz como un tipo.

let  subscriptionFrench : Subscription = {
	id: 1
	name: 'Paris',
	sign(): string {
		return "Bonjour"¨;
	}
}

Implementar interfaces en clases

La interfaz también ayuda a obligar a tus clases u objetos a tener una estructura definida, describiendo con claridad cómo debe lucir una entidad.

Al usar la palabra clave implements después del nombre de la clase junto al nombre de la interfaz, la clase implementará dicha interfaz y estará obligada a definir cada campo establecido en ella.

Además, una clase puede implementar más de una interfaz separándolas por comas, lo cual es una gran ventaja frente a la herencia tradicional.

El editor y el compilador mostrarán un error si la clase no cumple con la interfaz definida.

interface NetflixPremium  {
  allMovies: number;
}
class Spain implements NetflixPremium, Subscription {
    price: Number = 10.99;
    allMovies: number = 100;
    constructor(public name: string) {
 
    }
    sign(): void {
        console.log(`Thanks for signup ${this.name}.`)
    }
}
 
let spainSubscriptions = new Array<Spain>();
let bcn = new Spain("bcn");
let madrid = new Spain("madrid");
 
spainSubscriptions.push(bcn);
spainSubscriptions.push(madrid);
 
spainSubscriptions.forEach(element => {
    element.sign();
});
 

Extender interfaces

Una mejor alternativa para implementar múltiples interfaces en una sola clase es extenderlas, usando la palabra clave extends junto al nombre de la interfaz base que queremos ampliar.

interface NetflixPremium extends Subscription {
  allMovies: number;
}

Ahora la interfaz NetflixPremium contiene todo lo definido en Subscription, por lo que la clase Spain solo necesita implementar una única interfaz.

class Spain implements NetflixPremium {
    price: Number = 10.99;
 
    constructor(public name: string) {
 
    }
    sign(): void {
        console.log(`Thanks for signup ${this.name}.`)
    }
    allMovies: number = 100;
 
}

Listo

Espero que esto te sirva de ayuda para dar tus primeros pasos con las interfaces en TypeScript. Si te gustó este artículo, compártelo.

Foto de Cytonn Photography en Unsplash