TypeScript / Angular – Interface

Bienvenidos sean a este post, hoy continuaremos con un tema singular.

Para hablar sobre este tema vamos a necesitar el proyecto que estamos utilizando, sino lo poseen les dejo un link para descargarlo:

Simplemente extraigan el directorio en el PC y listo, ya pueden utilizarlo. Nuestro primer paso sera aplicar la interfaz en angular. Estas en realidad son las de typescript, de las cuales hablamos en este post, y son exactamente iguales a cualquier otra interfaz pero aca la utilizaremos con un fin especifico. Para ello ejecutaremos el siguiente comando:

$ ng generate interface ubicacionviviendas

Este genera un archivo con el nombre de ubicacionviviendas.ts en el directorio src/app. Con esto realizado entraremos a este archivo y modificaremos el codigo de la siguiente manera:

app/ubicacionviviendas.ts

export interface Ubicacionviviendas {
        id: number;
        nombre: string;
        ciudad: string;
        pcia: string;
        foto: string;
        wifi: boolean;
}

En este caso estableceremos unas propiedades que seran los datos de cada vivienda. Pero como toda interfaz solo es la declaracion de dichas propiedades. Para implementarla debemos ir a hogar.complement.ts y al inicio agregaremos la siguiente linea:

import { Ubicacionviviendas } from '../ubicacionviviendas';

Esto nos importara la interfaz en nuestro componente, nuestro siguiente paso sera modificar el exportador de la clase en el mismo archivo de la siguiente manera:

export class HogarComponent {
  readonly url = 'https://angular.io/assets/images/tutorials/faa';

  ubicacionViviendas: Ubicacionviviendas = {
    id: 9999,
    nombre: 'Hogar Prueba',
    ciudad: 'Ciudad Prueba',
    pcia: 'CBA',
    foto: `${this.url}/example-house.jpg`,
    wifi: true
  };
}

Primero estableceremos una url que usaremos como direccion para la propiedad foto. Luego creamos una propiedad del tipo de la interfaz y ahi completaremos todos los datos de las distintas propiedades. Con esto podemos crear nuestros datos, en este caso los hogares que mostraremos, y si bien de momento no veremos este dato reflejado en la pagina, para el proximo post veremos como recuperarlo. Antes de finalizar les dejo un link con todos los archivos del proyecto y los trabajados en este post:

En resumen, hoy hemos visto interface, como se crean, como se comportan, creamos un ejemplo y lo agregamos a nuestro codigo, pero por el momento solo lo implementamos. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.