typeScript (4): interfaces

Introducción a las interfaces en typeScript.

Stanley Boxer

archivado en: JavaScript / 1 Septiembre, 2016 / taller:

Como estamos viendo, typeScript se caracteriza, entre otras cosas, por introducir una montonera de reglas en el estilo por lo general libre de javaScript. Esto puede parecer incómodo, pero facilita mucho el trabajo en aplicaciones medianas y grandes, donde se produce una relación inversamente proporcional entre las reglas a seguir y el código a refactorizar de los menos avezados. Dicho de otra forma, aunque sea más laborioso definir y tener que seguir reglas -como las variables tipadas o los parámetros obligatorios de una función-, mucho más pesado es tener que arreglar toneladas de código a tres días de una entrega porque no encajan las piezas o, sencillamente, hay partes que son un desastre de fondo y forma. Y es en este sentido donde cobran gran valor otra característica muy interesante de ts y es que permite definir interfaces.

Qué son las interfaces

En programación, las interfaces son definiciones abstractas de las características que deben tener las clases, los objetos y demás animales complejos del ecosistema de un lenguaje. Por ejemplo, imaginemos que debemos programar una calculadora y hay un equipo encargado de cada operación, es decir, unos harán la suma, otros la resta, etcétera... Si cada equipo pudiera hacer las cosas como le venga en gana, al final tendríamos un mosaico de estilos más complicado de mantener y de combinar entre sí. Para evitarlo, podemos definir una interfaz que deberá implementar cada equipo en su operación.

interfaz Operacion

metodoCalcularOperacion()

metodoMostrarResultado()

De esta manera, todos los equipos saben que en su clase / objeto / función / lo-que-sea deben usar los métodos y propiedades ahí definidos.

class Sumar implementa Operacion

metodoCalcularOperacion(a: number, b: number) {

return a + b;

}

En síntesis, una interfaz es una especie de clases abstracta que actúa como un contrato en el que se definen qué métodos y propiedades deben seguir quienes lo suscriben.

Interfaces en clases

Las interfaces se definen con el término interface y para indicar que se toma como referencia se usa la palabra implements. En typeScript se pueden manejar interfaces en distintos escenarios, pero el que me parece más interesante son las clases. Valga como ejemplo una librería donde tenemos un interfaz genérico para todos los tipos de libros, en el cual se indica que todos sus contratantes deben manejar dos parámetros: el autor y el título.

interface Libros {

titulo: string;

autor: string;

serLeido() {

//

}

}

/* Mal: esto casca por que no se implementa la propiedad autor ni el método serLeido() */

class Ensayos implements Libros {

titulo: string;

constructor(titulo:string) {

this.titulo = titulo;

}

}

/* Bien */

class Novelas implements Libros {

titulo: string;

autor: string;

constructor(titulo:string, autor:string) {

this.titulo = titulo;

}

serLeido() {

//

}

}

Como ocurre con las funciones, para indicar que un parámetro es opcional, hay que añadir una interrogación (?).

parametroOpcional?: string;

Interfaces en funciones, arrays y objetos

También podemos implementar interfaces en funciones, pero en este caso para definir la paramétrica que reciben. Volviendo al ejemplo anterior, podemos indicar que una función implemente el interfaz Libros, de tal manera que casque si no le llega un objeto con las dos propiedades obligatorias definidas en el interfaz.

interface Libros {

titulo: string;

autor: string;

}

function novelas(libroObjeto: Libros) {

console.log(libroObjeto.titulo);

}

/* Mal, falta el autor */

let libroObjeto = {

titulo: 'Don Quijote'

};

novelas(libroObjeto);

/* Bien */

let otroLibro = {

titulo: 'Ulises',

autor: 'James Joyce'

};

novelas(otroLibro);

Además de las funciones y las clases, los arrays también pueden implementar un interfaz, aunque no tengo nada claro que esto sea útil en la vida real. El mecanismo básico es muy sencillo: se «tipa» el array con el interfaz. Pero vamos, que algo se me debe estar escapando, porque así sin más me parece que no vale para nada.

interface Frutas {

[index: number] : string;

}

let miArrayFrutas: Frutas;

miArrayFrutas = ['peras', 'kiwis', 'mandarinas'];

En cambio, sí que me parece muy útil que se puedan usar con objetos, lo cual se hace igual que antes, tipando el objeto con el interfaz.


interface NaveEspacial {

nombre: string;

tripulantes: string[];

}

let miNaveEspacial: NaveEspacial;

miNaveEspacial.nombre = 'Halcón Milenario';

miNaveEspacial.tripulantes = ['han solo', 'chewbacca'];

/* Esto casca porque NaveEspacial no tiene caracteristicas */

miNaveEspacial.caracteristicas = 'salto al hiperespacio';

Herencia

Termino esta entrada indicando que las interfaces también pueden extenderse unas de otras.

interface Deportes {

reglas: string[];

espacio: string;

}

interface Baloncesto extends Deportes {

jugadores: number;

}

De hecho, podemos extender varios interfaces en uno (lo que equivaldría a la herencia múltiple), lo cual permite construcciones muy interesantes.

interface Mamiferos {

//

}

interface Felinos {

//

}

interface Gatos extends Mamiferos, Felinos {

//

}

Bueno, pues por hoy lo dejo aquí.

|| Tags: ,

valoración de los lectores sobre typeScript (4): interfaces

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario

*