Cursos Empresas Blog Live Conf Eventos Precios

0:0010:18

Interfaces

Curso de TypeScript 3

Clase 21 de 32

Clase 21 / 32

Freddy Contreras

Hace 6 años

¿Cúal sería la diferencia entre utilizar interface y type?

type User = {
  name: string
}

interface UserI {
  name: string
}

Adrian Ducuara Benitez

Hace 5 años

Hola fcontreras21, espero te encuentres bien, la diferencia consiste en lo siguiente:

type: Te permite reutilizar un tipo de dato sea string, number, boolean por medio de un alias. Permítame resalto un ejemplo:

Pensemos en que hemos construido dos funciones y tal vez ambas retornen dependiendo de las decisiones en su lógica de negocio uno o dos tipos de datos.

function firstFuntionOne(): string | undefined { 
}

function secondFunction(): string | undefined {
}

Si te fijas estamos reutilizando el tipado del retorno de la función, podríamos mejorar un poco con los beneficios de type en esta forma:

type typesTest = string | undefined

function firstFuntionOne(): typesTest { 
}

function secondFunction(): typesTest {
}

De esta menera tendríamos ambos tipos, pero no solo aplica a este ejemplo de tipos, podrían ser así mismo valores sugeridos.

Interface: En las interfaces de TypeScript defines atributos o propiedades para luego implementarlas en tus clases a través del concepto de herencia. Tal vez podríamos decir, bueno pero podemos usar otra clase y heredar sus propiedades y eso es correcto, sin embargo a diferencia es que en las interfaces únicamente implementas propiedades sin métodos. Esto logra una gran ventaja a la hora de implementar una interface y tal vez no querer implementar toda una lógica en funciones obligatoriamente.

Te recomiendo si no te queda del todo claro ir a la clase https://platzi.com/clases/1869-typescript/27977-union-de-tipos-alias-y-tipos-literales/

#NuncaParesDeAprender

Comentarios (31)31 comentarios

Jose Daniel Hernandez Quiceno

Hasta donde tenia entendido en POO, una interfaz definia unicamente los METODOS de un objeto y no las propiedades como lo muestra el ejemplo que nos da el profesor. Tanto de las propiedades como los metodos se encargan las clases. Aqui es donde entra Typescript, en TS podemos tambien definir propiedades, no unicamente metodos.

Y si es util, creo que esta definicion de interfaz es un poco mas clara: Una interfaz (En TypeScript) es un tipo (como string, boolean, number, etc) mas "complejo", en el cual defines (como enun contrato) las propiedades y metodos que se deben cumplir de cualquier objeto que lo instancie.

La diferencia entre una interfaz y una clase es que en la interfaz solo hacemos mencion de que esperamos de un objeto, en una clase mencionamos las propiedades (igual que una interfaz) pero definimos los metodos (osea, especificamos que hara ese metodo, en la interfaz solo mencionamos el nombre de la funcion)

Albert Eduardo Hidalgo Tavera

Puedes contactar esto en la documentación oficial de TS https://www.typescriptlang.org/docs/handbook/interfaces.html

Juan Sarmmiento

En C# y creo que en la mayoría de lenguajes que conozco las interfaces pueden definir tanto como atributos/propiedades y métodos, la diferencia entre una interfaz y una clase es que la primera solo define los tipos y métodos que debe tener la clase u objeto que la implemente pero no su implementación en si

Marco Antonio Macedo Preciado

Pro tip Impriman object literals en la consola para tener todo bien mostrado desde la consola

console.log( { picture }):

Luis Abdel Rangel Castro

Emerson Cedeño

Miguel de la Rosa

Una interfaz es como un molde para un objeto. Si el objeto no encaja en el molde, te va a dar error.

Moisés Manuel Morín Hevia

Una interface para defir los parámetros y el tipado para invocarlo en las funciones.

Roberto Pérez

Excelente ejemplo compañero

Boris Vargas Paucara

// INTERFACES
/* Las interfaces una forma poderosa de definir 'contratos' tanto para tu proyecto, como para el codigo externo */

// Funcion para mostrar una Fotografia
export {}

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}
interface Picture {
    title: string,
    date: string,
    orientation: PhotoOrientation
}
function showPicture(picture: Picture) {
    console.log(`[title: ${picture.title}, date: ${picture.date}, orientation: ${picture.orientation}]`);
}
let myPic = {
    title: 'Test title',
    date: '2020-03',
    orientation: PhotoOrientation.Landscape
}
showPicture(myPic);
showPicture({
    title: 'Test Title',
    date: '2020-03',
    orientation: PhotoOrientation.Portrait,
    // extra: 'test'   // --> Error
}); // objecto anonimo

Helí Fernando Jerez Rincón

Cuando defines un objeto por ejemplo:

let obj = {
    user: "Heli",
    pwd: "1345"
};

typescript crea una interface anónima con los tipos de los objetos y es posible castearlo a una interface definida

interface ObjInterface {
    user:string;
    pwd:string;
}


let obj = {
    user: "Heli",
    pwd: "1345"
};


let obj2 = obj as ObjInterface;

console.log(obj["user"]);

Miguel Angel Reyes Moreno

Las interfaces en TS constituyen una forma poderosa de definir "contratos" tanto para tu proyecto, como para el código externo del mismo.

Documentación oficial sobre interfaces en TS

Interfaces en TS explicado en TutorialsTeacher

Interfaces en TS explicado en Desarrollo Web

Interfaces en TS explicado en TutorialsPoint

//* Función para mostrar una fotografía
export {}

enum PhotoOrientation{
  Landscape,
  Portrait,
  Square,
  Panorama
}

interface Picture {
  title: string,
  date: string,
  orientation: PhotoOrientation
}

function showPicture(picture: Picture) {
  console.table({picture}) //* Imprime una tabla con los datos del objeto, se ve muy profesional
}

let myPic = {
  title: 'Test title',
  date: '2020-03',
  orientation: PhotoOrientation.Landscape
}

showPicture(myPic)
showPicture({
  title: 'Another title',
  date: '2021-06',
  orientation: PhotoOrientation.Portrait
})

Andrea Ysabel Urdaneta Durango

En C# las interfaces son usadas de manera similar, puesto que nos ayudan a mantener contratos en nuestro código y controlar la tipificación de datos y mantenerlos dentro de una estructura

Lo tendré en cuenta. Gracias.

Raphael Martinez

Cuándo debería usar una interface, cuando un type ? con ambos puedo hacer lo mismo

Sí, puedes invocar la interface las veces que quieras en las funciones que quieras.

David Santiago Hurtado Betancourt

La documentación oficial te puede dar una idea: Differences Between Type Aliases and Interfaces

Federico Walovnik

Se constituyen como forma de contratos para el codigo que vaya a implementarla.

Es una forma de definir que propiedades y metodos deben implementar si o si las propiedades que se declaren de este tipo de interfas

interface Picture{
	title: string,
	date: string,
	orientation: PhotoOrientation // Enum
}

// el parametro picture va a verificar si el valor recibido cumple con la interface
function showPicture(picture: Picture){
	console.log(`[title: ${picture.title},
								date: ${picture.date}
								orientation: ${picture.orientation}]`
}

Juan Diego Urbina Chuscano

al igual que los parámetros de las funciones las interfases pueden tener sus propiedades opcionales. La ventaja de las propiedades opcionales es que puede describir estas posibles propiedades disponibles y al mismo tiempo evitar el uso de propiedades que no forman parte de la interfaz.

interface SquareConfig {
  color?: string;
  width?: number;
}

Juan Francisco Cevallos Valdivieso

Entonces, interface seria como la declaracion del objeto?

Gabriel Alejandro Delgado Álvarez

Si,de cierta manera. Un objeto que utilizas para crear otros objetos que extiendan del primero

Gonzalo Rojas Alvarez

No estoy seguro, interface seria mas como un constructor de un objeto. Ahí se definirían las variables y sus tipos , pero un objeto podría tener mas cosas.

Alessandra Amicarella

TypeScript Cheat Sheets

Sergio Orejarena Rueda

Aquí una aplicación en otro contexto 😁 .

Jofay Zhan Segura

https://pokeapi.co/

silvana murgo

Interfaces vs Type - >

Lizardo Reyes

Justo veía eso, son muy similares, casi tienen el mismo uso, hasta la herencia. Pero es más cómodo usar extends que &, asi que interfaces será lo que usare en estos casos.

Jorge Cruz Perez

"Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable."

mas info -> :D

Jose Daniel Barría Reyes

enum PhotoOrientation{
	Landscape,
	Portrait
}
interface Picture {
	title:string;
	date:string;
	oretation: PhotoOrientation
}
public showPicture(picture: Picture): void;

Jesus Adrian Berrio Valdes

Seria una buena practica tener un archivo llamado types.ts e ir importando las interfaces segun las vayamos nesecitando?

Andres Roberto Coello Goyes

Si yo aveces lo llamo /interfaces y alli modulamos las propiedades que usaremos, es una forma de tener organizado

Jorge Méndez Ortega

Prácticamente un ENUM es una simple lista de propiedades y una interfaz es como un mapeo de las propiedades de un objeto con la cual no nos permite mandar ni mas ni menos propiedades y ademas no nos deja mandar propiedades que no cumplan con el tipo

Randall Samuel Méndez Loría

Si, se puede interpretar de esa manera. Hay una forma de enviar propiedades si que cumplan el tipo, es con casteos, pero solo funciona con tipo simples.

David Prieto Cornejo

Arantxa Giovanna Rosas Del Valle

Si yo agrego la propiedad extra desde el objeto y coloco el objeto en el parámetro no me marca error, la validación de la interfaz no se activa, ¿eso no sería incorrecto?

let myPic = {
  title: "mi titulo",
  date: "hoy",
  orientation: photoOrientation.landscape,
  extra: ""
}

showPicture(myPic);

Robert Romero Medina

Mmm esta raro, agregaste el "extra" y le pusiste tipo string en la interface?

Jesus Federico David Herrera

De la unica manera que la funciona acepte ese parametro extra es que en la interface hayas incluido ese parametro. Sino la interfaz va a validar que tengas los atributos indicados en el.

Interfaces

Progreso del curso

Introducción a TypeScript

Entorno de Desarrollo

Tipos en TypeScript

Tipos Personalizados

Módulos

Cierre