Dado que Angular aprovecha Typecript, los desarrolladores pueden hacer uso de la escritura fuerte. Esto es de gran ayuda durante el desarrollo, ya que su IDE ayudará a detectar errores incluso antes de compilar la aplicación. De esa forma, puede solucionar problemas tan pronto como el IDE notifique que algo salió mal. Llevar este concepto un paso más allá es el uso de interfaces . Aunque JavaScript en sí no tiene interfaces, Typescript sí. Las interfaces son muy comunes en lenguajes de programación orientados a objetos como Java, PHP y C #. Con Typecript, ahora también podemos usarlos en la interfaz.

¿Qué es una interfaz?

Una interfaz es una especificación que identifica un conjunto relacionado de propiedades y métodos que una clase debe implementar. En otras palabras, una clase determinada acepta admitir esta especificación cuando implementa esa interfaz. La interfaz es simplemente la definición de las propiedades y métodos, y la clase que implementa esa interfaz tiene el código real para cada una de esas propiedades y métodos definidos. En TypeScript, puede utilizar la propia interfaz como un tipo de datos. Las interfaces en Typecript son un concepto de tiempo de desarrollo únicamente, no se incluyen en el JavaScript final después del proceso de compilación.

Definición de una interfaz angular

Ahora podemos crear una interfaz para usar con nuestra clase de componente GameListComponent. Primero, agreguemos un game.tsarchivo al directorio de juegos.
archivo ts de interfaz angular

Agrega el siguiente código.

  • interface: Una interfaz se define mediante la palabra clave de interfaz
  • IGame: El nombre de la interfaz que describe la clase y tiene una I mayúscula como prefijo

    • export: La palabra clave export es necesaria para que las clases en otros lugares puedan implementar según lo necesiten

  • En el cuerpo de la interfaz que se encuentra entre las llaves {}, se definen las propiedades y métodos que * deben * crearse en el objeto comercial que hace uso de esta interfaz. En otras palabras, si una clase usa la interfaz IGame anterior, puede contar con que tendrá todas las propiedades enumeradas anteriormente.

Usar una interfaz como tipo de datos

Además de usar una interfaz al aprovechar la palabra clave implements, también puede usar una interfaz como tipo de datos . Veamos cómo usar nuestra nueva interfaz IGame como un tipo de datos en la clase de componente GameListComponent.

game-list.component.ts

En el código anterior, primero importamos la interfaz usando import {IGame} from './game'; . Luego, podemos usar el nombre de la interfaz como el tipo de datos en la gamespropiedad. Esa es la segunda línea resaltada arriba.

¿Cómo ayuda la interfaz?

La gamesmatriz ahora tiene un tipo de datos específico de IGame. Lo que eso significa es que los datos que pueblan esa matriz deben coincidir exactamente con las propiedades establecidas en la interfaz que creamos primero. En otras palabras, la variedad de juegos ahora está fuertemente tipada. Nuestro IDE debe notificarnos si nos falta algo o si hay un error ortográfico. Probemos eso.

Primero, eliminaremos la gameIdpropiedad de uno de los objetos del juego. Inmediatamente en el IDE obtenemos algunos errores obvios y líneas onduladas con el mensaje de error de TS2322: Escriba '{' gameName ': string; 'gameCode': cadena; 'releaseDate': cadena; 'descripción': cadena; 'precio': número; 'thumbRating': número; 'imageUrl': cadena; } 'no se puede asignar al tipo' IGame '. Falta la propiedad 'gameId' en el tipo '{' gameName ': string; 'gameCode': cadena; 'releaseDate': cadena; 'descripción': cadena; 'precio': número; 'thumbRating': número; 'imageUrl': cadena; } ' .
comprobación de errores mecanografiados mediante una interfaz

Básicamente, solo dice: “¡Oye! ¡Olvidaste la propiedad gameId para este juego! ”. Así que esa es una excelente manera de detectar errores y asegurarse de que no se haya perdido nada antes de intentar crear la aplicación.

Lo mismo ocurre con los errores ortográficos. Digamos que tenemos un error ortográfico en una de las propiedades. Aquí escribimos mal el precio como precios . Una vez más vemos un error de TS2322: Escriba '{' gameId ': number; 'gameName': cadena; 'gameCode': cadena; 'releaseDate': cadena; 'descripción': cadena; 'precios': número; 'thumbRating': número; 'imageUrl': cadena; } 'no se puede asignar al tipo' IGame '. El literal de objeto solo puede especificar propiedades conocidas, y "precios" no existe en el tipo 'IGame' .
la interfaz detecta errores ortográficos en el momento del desarrollo

¡Arregle ese error de ortografía y listo! Las interfaces van de la mano con la potente función de mecanografía de Typecript. Verificar el resultado en el navegador muestra que la aplicación funciona igual que antes. Sin embargo, el beneficio es que nuestro código es un poco más limpio y mejor organizado al hacer uso de esa interfaz.


Resumen

  • Las interfaces se utilizan para definir tipos personalizados, como la interfaz IGame que creamos anteriormente.
  • Las interfaces promueven una escritura fuerte en una aplicación angular
  • Defina una interfaz usando la interfacepalabra clave
  • Asegúrese de utilizar la exportpalabra clave al crear una interfaz
  • En el cuerpo de la interfaz, defina las propiedades, métodos y tipos necesarios
  • Implementar una interfaz en una clase con la implementspalabra clave
  • Escriba el código necesario para cada propiedad y método definido en la interfaz
  • Utilice una interfaz como tipo de datos escribiendo el nombre de la interfaz después de dos puntos, así: juegos: IGame [] = []