Interfaces
Contenido del curso
Jose Daniel Hernandez Quiceno
Albert Eduardo Hidalgo Tavera
Juan Sarmmiento
Marco Antonio Macedo Preciado
Luis Abdel Rangel Castro
Emerson Cedeño
Miguel de la Rosa
Moisés Manuel Morín Hevia
Roberto Pérez
Boris Vargas Paucara
Helí Fernando Jerez Rincón
Miguel Angel Reyes Moreno
Andrea Ysabel Urdaneta Durango
Moisés Manuel Morín Hevia
Raphael Martinez
Moisés Manuel Morín Hevia
David Santiago Hurtado Betancourt
Federico Walovnik
Juan Diego Urbina Chuscano
Juan Francisco Cevallos Valdivieso
Gabriel Alejandro Delgado Álvarez
Gonzalo Rojas Alvarez
Alessandra Amicarella
Sergio Orejarena Rueda
Jofay Zhan Segura
silvana murgo
Lizardo Reyes
Jorge Cruz Perez
silvana murgo
Jose Daniel Barría Reyes
Jesus Adrian Berrio Valdes
Andres Roberto Coello Goyes
Jorge Méndez Ortega
Randall Samuel Méndez Loría
David Prieto Cornejo
Freddy Contreras
Adrian Ducuara Benitez
Arantxa Giovanna Rosas Del Valle
Robert Romero Medina
Jesus Federico David Herrera
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)
Puedes contactar esto en la documentación oficial de TS https://www.typescriptlang.org/docs/handbook/interfaces.html
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
Pro tip Impriman object literals en la consola para tener todo bien mostrado desde la consola
console.log( { picture }):
{ picture: { title: 'New year', date: '02/07/1980', orientation: 1 } }
elevemos un poco la barra 🤓, qué tal les parece usar table en lugar de log, quedando de la siguiente forma:
console.table( {picture} );
Una interfaz es como un molde para un objeto. Si el objeto no encaja en el molde, te va a dar error.
Una interface para defir los parámetros y el tipado para invocarlo en las funciones.
Excelente ejemplo compañero
// 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
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"]);
Interfaces
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 })
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.
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.
La documentación oficial te puede dar una idea: Differences Between Type Aliases and Interfaces
Interfaces
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}]` }
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; }
Entonces, interface seria como la declaracion del objeto?
Si,de cierta manera. Un objeto que utilizas para crear otros objetos que extiendan del primero
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.
TypeScript Cheat Sheets
Aquí una aplicación en otro contexto 😁 .
Interfaces vs Type - >
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.
Luis: yo hice lo siguiente, en vez de interfaz use un type:
type Picture = { title:string, date:string, orientation:PhotoOrientation } const showPicture = (data: Picture)=> { console.log(`[titulo: ${data.title} date: ${data.date} orientation: ${data.orientation}]`); } showPicture({title: "Venom", date: "14-07-2000", orientation: PhotoOrientation.Square}); let myPict:Picture ={ title:"test title", date: "2020-13", orientation: PhotoOrientation.Landscape } showPicture(myPict); interface Dos{ method1():void; }
Transpila y correo sin problema, la pregunta es cual es mas conveniente?
"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
enum PhotoOrientation{ Landscape, Portrait } interface Picture { title:string; date:string; oretation: PhotoOrientation } public showPicture(picture: Picture): void;
Seria una buena practica tener un archivo llamado types.ts e ir importando las interfaces segun las vayamos nesecitando?
Si yo aveces lo llamo /interfaces y alli modulamos las propiedades que usaremos, es una forma de tener organizado
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
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.
Respecto a lo de que la interfaz no permite mandar más propiedades, no es del todo cierto. Hay una forma en la que le podemos decir que pueden haber más propiedades que desconocemos al momento de definirla:
interface Person { firstName: string; lastName: string; [key: string]: any }
Ese [key:string]: any básicamente es análogo a un parámetro opcional en las funciones, permitiéndonos asignar los siguientes objetos:
const person: Person = { firstName: 'Jorge', lastName: 'Méndez Ortega' } const person2: Person = { firstName: 'David', lastName: 'Prieto', age: 32 } const person3: Person = { firstName: 'John', lastName: 'Doe', role: 'developer', isActive: true }
¿Cúal sería la diferencia entre utilizar interface y type?
type User = { name: string } interface UserI { name: string }
Hola fcontreras21, espero te encuentres bien, la diferencia consiste en lo siguiente:
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.
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
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);
Mmm esta raro, agregaste el "extra" y le pusiste tipo string en la interface?
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.
