Qué son las interfaces de TypeScript y su implementación

Clase 16 de 63 • Curso de Angular 6 2018

Resumen

Los tipos de datos Interfaces de TypScript, son muy parecidos a una clase, en la que se definen propiedades internas que pueden ser de cualquiera de los otros tipos. Estas propiedades internas pueden definirse como obligatorias u opcionales usando el símbolo “”?"". Las interfaces definen en cierto modo estructuras personalizadas de datos en las que lo principal es que al ser implementadas usando ciertas IDEs (como Webstorm), muestran mensajes de control y validación para asegurar el uso adecuado de dicha interface, en tiempo real durante el desarrollo.

La forma de declarar una interface se puede ver en el siguiente ejemplo:

export interface User {
  nick: string,
  subnick?: string,
  age?: number,
  email: string,
  friend: boolean,
  uid: any
}

Carlos Enrique Ramírez Flores

student•

poder marcar un valor de un object de interface como opcional, con el signo ?

 //el subnick?: string; y age?:number; quedan como opcionales
export interface User{
	nick: string;
	subnick?: string;
	age?:number;
	email:string;
	friend:boolean;
	uid: any;
}

Julio J Yépez

student•

Cuidado con esos ; al final de cada línea Carlos. Son comas ,

Carlos Enrique Ramírez Flores

student•

Hola @jjyepez, en este caso si se puede usar el ; aun que sea un objeto

Juan Carlos Cardenas Delghans

student•

Angular CLI te permite generar una interface con cualquiera de los siguientes comandos:

ng generate interface interfaces/user

ng g i interfaces/user

ng g interface interfaces/user

ng generate i interfaces/user

Stalin Alberto Caiche Morán

student•

Hola con angular cli también pueden crear las interfaces:

ng generate interface interfaces/user

Al colocar interfaces/ se crea dicho directorio dentro de app.

Usuario anónimo

user•

Muy buen aporte para optimizar la creación de interfaces.

Maria Gabriela Rodriguez

student•

Excelente clase!! también podemos hacer esto

ng generate interface interfaces/user

Alan Lapierre

student•

Los que venimos del mundo Java, muy frecuentemente terminamos usando clases para definir DTOs. No es mala la idea de usar interfaces y asignarle un objeto anónimo. Voy a adoptarlo en mis desarrollos 😃

Jecsham Castillo

student•

Curso básico de TypeScript + Curso Avanzado de Angular… tremendo pack 😎

Jeison Sneider Ruiz Zemanate

student•

user.ts —>

export interface User {
    nick: string;
    subnick?: string;
    age?: number;
    email: string;
    friend: boolean;
    uid: any;
}

home.component.ts

import { Component, OnInit } from '@angular/core';
import {User} from '../interfaces/user';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() {
  let myUser: User = {
    nick: 'Eduardo',
    age: 22,
    email: 'eduardo@hotmail.com',
    friend: true,
    uid: 1,
  };
  let users: User[] = [myUser];
  console.log(myUser);
  }

  ngOnInit() {
  }

}

Marcelino Hernandez

student•

Me acostumbre a hacer uso de las class
para realizar los tipos de datos ya saben POO

export class User {
	nick: string;
	subnick: string = null;
	age: number = null;
	email: string;
	friend: boolean;
	uid: any;
}

¿Que diferencia hay en usar interface en ts a una class?

Nelson Eduardo Visbal Jensen

student•

Las clases se instancian, las interfaces no. Una interfaz es una plantilla de una clase, te indica que debe tener la clase que la implemente. Otra diferencia es que las clases permiten herencia, las interfaces no. EN POO (Programación orientada a objetos) las interfaces te dan la guía para crear la clase.

Corporativo ZEISA

student•

por qué usar una interfaz y no crear una clase de tipo usuario? cuales serian los pros y contras?

Jaime Diaz

student•

Hola,
Si bien es cierto que ambas construcciones sirven para casos simialres, la respuesta depende más sobre cómo vayas a generar los datos.
Es habitual usar interfaces, desprovistas de inicialización y funcionalidad, ya que esas partes es común que sean delegadas en los servicios. A diferencia de las clases, que se tendrían que crear objetos como instancias de dichas clases con la palabra reservada “new”.
IMPORTANTE:

Una desventaja que veo de usar clases, es que los datos contenidos en los objetos no siempre se generan propiamente desde el código Frontend, ya que es habitual que dichos datos dependiendo del caso, los proporcione mediante llamadas HTTP (Ajax), en estos casos no habrá “new” o instanciación, sino que se usará Angular para solicitar al servidor algún dato (en formato JSON habitualmente), para tales casos, es necesario definir mediante interfaz el tipo dado.
Hay que tener en cuenta que también se puede usar una clase que implemente una interfaz dada, y esto demuestra la variedad y complejidad que pueden tener nuestros tipos (mezclar clases e interfaces).

En síntesis, una clase se puede instanciar y podría contener cierta funcionalidad, una interfaz solo se definen los tipos y NO se instancia. Se implementa:

export interface IUsuario {
  nombre: String;
  direccion: String;
  creado: Date;
}

// definición de un tipo Class que implementa una interfaz
export class CUsuario implements IUsuario {
  creado: Date;
  constructor(public nombre: string, public direccion: String) {
    this.creado = new Date(Date.now());
   }
}

Espero haber aclarado un tanto el panorama compañero.
Saludos.

Duilio Luque

student•

Qué tipo de dato usa angular para archivos con Excel, PDF o txt?

Juan Carlos Pinzón

student•

Hola compañero, Angular no maneja ese tipo de archivo. Lo que se muestra en esta clase y la anterior son los tipos de Datos, tipos de variables. A lo que te refieres son tipos de archivos creo, pero Angular no maneja archivos lo más cercano es cuando se hace un Upload, pero es algo un poco abstracto que solo nos preocupamos de mandar a un API. Claro que podemos validar que tipo es el archivo pero no manejarlo como tal.

Carlos Enrique Ramírez Flores

student•

poder marcar un valor de un object de interface como opcional, con el ?

//el subnick?: string; y age?:number; quedan como opcionales export interface User{ nick: string; subnick?: string; age?:number; email:string; friend:boolean; uid: any; }

Gualberto Cuiza Villca

student•

Al parecer se comporta y es igual que un modelo, que diferencias hay?

Juan Carlos Pinzón

student•

De hecho en varios sitios he visto que los nombran así: Modelos

Carlos Uriel de Jesus Sánchez González

student•

export interface User {
nick: string;
subnick: string;
age: number;
email: string;
friend: boolean;
uid: any;
}

Carlos Uriel de Jesus Sánchez González

student•

export interface User {
  nick: string,
  subnick?: string,
  age?: number,
  email: string,
  friend: boolean,
  uid: any
}

Cristian David Franco Garcia

student•

ng generate interface interfaces/user 😉

Erick Suarez Zavala

student•

Solo como comentario, CLI de angular tambien te ayuda a generar interfaces, con:
ng generate interface nombreInterface

Walter Lensinas

student•

Buenas tardes, dejo el código de las clase en este repositorio https://github.com/wlensinas/platzinger-wl.git

Para ver el código:

git clone https://github.com/wlensinas/platzinger-wl.git
git checkout 16-interfaces
npm install
ng serve --open

Saludos.

Wilson Marino Pablo Mendez

student•

Es como cuando defino mis campos en el gestor DB SQL

Cristian Palta

student•

buenas clases

Rubian Alonso Llanos Aguirre

student•

Siento como si estuviera escribiendo código en Kotlin, muy interesante el curso hasta ahora.

import { Component, OnInit } from '@angular/core';
import {User} from '../interfaces/user';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() {
  let myUser: User = {
    nick: 'Eduardo',
    age: 22,
    email: 'eduardo@hotmail.com',
    friend: true,
    uid: 1,
  };
  let users: User[] = [myUser];
  console.log(myUser);
  }

  ngOnInit() {
  }

}

export interface IUsuario {
  nombre: String;
  direccion: String;
  creado: Date;
}

// definición de un tipo Class que implementa una interfaz
export class CUsuario implements IUsuario {
  creado: Date;
  constructor(public nombre: string, public direccion: String) {
    this.creado = new Date(Date.now());
   }
}

Qué son las interfaces de TypeScript y su implementación

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos