Extensión de interfaces
Contenido del curso
Luis Abdel Rangel Castro
Samuel Zanón
Miguel Angel Reyes Moreno
Jose Daniel Barría Reyes
Moisés Manuel Morín Hevia
Luis Angel
Boris Vargas Paucara
Moisés Manuel Morín Hevia
Miguel Angel Reyes Moreno
Jose Cortes Jaramillo
Edgar López Rangel
Jorge Cruz Perez
Henry Villavicencio
Alberto Camarena
Ariel Claudio Sitta
Marcia Castro Moya
Nixon Martinez
Yamid Vélez Muñoz
Jorge Cruz Perez
Rafael Aguero Baez
yerson lasso
Alejandro Barrios
Moisés Manuel Morín Hevia
Juan Jiménez
Gustavo Gonzalez Montero
Irving Juárez
Darwin Rodríguez
David Prieto Cornejo
Moisés Manuel Morín Hevia
Jose Manuel Montaño Saenz
Jose Manuel Montaño Saenz
Sergio Orejarena Rueda
Juan Chavez Cornejo
Juan Chavez Cornejo
Hector Rubi Garcia
Gerson Zuñiga
Alberto Camarena
Mauricio Galvez
Moisés Manuel Morín Hevia
3 Ways to Clone Objects in JavaScript
Because objects in JavaScript are references values, you can't simply just copy using the =. But no worries, here are 3 ways for you to clone an object
const food = { beef: '🥩', bacon: '🥓' } // "Spread" { ...food } // "Object.assign" Object.assign({}, food) // "JSON" JSON.parse(JSON.stringify(food)) // RESULT: // { beef: '🥩', bacon: '🥓' }
if you're using "lodash" one of the most used libraries, you can simply use "cloneDeep"
Si estás usando "Lodash" una de las librerías más usadas, puedes usar simplemente clonedeep.
var cloned = _.cloneDeep(objects);
I think the most used now is the spread operator
Extendiendo Interfaces. Las interfaces pueden extenderse unas de otras. Esto permite copiar los miembros ya definidos en una interfaz a otra, ganando flexibilidad y reusabilidad de componentes. Utilizamos la palabra reservada extends para utilizar herencia.
interface Person { name:string; lastname:string; } interface Student extends Person { person:Person }
Muy bien ! Muchas graicas.
Más que extenderse ("extends", en inglés), lo que permiten más precisamente las interfaces en TypeScript es lo que español y en Programación Orientada a Objetos (POO) se conoce como "herencia". Bajo este mecanismo, las interfaces pueden "heredar" propiedades de otras interfaces, lo cual nos ayuda a no tener que repetir el mismo código que varias interfaces que hemos definido podrían compartir y además facilita el mantenimiento del mismo código a futuro.
export {} enum PhotoOrientation { Landscape, Portrait, Square, Panorama } interface Entity { id: number; title: string; } interface Album extends Entity { // copia de los atributos de Entity // id: number; // titulo: string; descripcion: string; } interface Picture extends Entity{ orientation: PhotoOrientation } const album: Album = { id: 1, title: 'Meetups', descripcion: 'Community events around the world' }; const picture: Picture = { id: 1, title: 'Family', orientation: PhotoOrientation.Landscape }; let newPicture = {} as Picture; newPicture.id = 2; newPicture.title = 'Moon'; console.log('album : ', album); console.log('picture : ', picture); console.log('newPicture : ', newPicture);
Buen código !
Extensión de interfaces
La herencia es un mecanismo para poder reutilzar código dentro de la programación orientada a objetos. TS provee esto con las interfaces. Las interfaces pueden extenderse de otras. Esto permite copiar los miembros ya definidos en una interfaz a otra, ganando flexibilidad y reusabilidad de componentes.
export {} enum PhotoOrientation{ Landscape, Portrait, Square, Panorama } //*Herencia de interfaces interface Entity { id: number, title: string, } interface Album extends Entity{ //*Copia de los atributos de Entity description: string } interface Picture extends Entity { orientation: PhotoOrientation } const album: Album = { id: 5, title: 'Meetups', description: 'Community events around the world' } const picture: Picture = { id: 10, title: 'Family', orientation: PhotoOrientation.Square } let newPicture = {} as Picture newPicture.id = 2 newPicture.title = 'Moon' console.table({album}) console.table({picture}) console.table({newPicture})
Cuál es la diferencia entre asignar el tipo a una variable con ':' y con 'as', ejemplo. let picture: Picture; let picture = { } as Picture;
En uno va a tipar la variable y en el otro va a hacer una aserción.
Significa que en el primero va a "exigir" que la variable tenga la estructura del tipo mientras que en la segunda vas a declarar un objeto (puede ser un objeto vacio como en tu ejemplo) y te va a permitir tratar a la variable como el tipo que definas (aún cuando el objeto esté vacio)
Interesante pregunta, encontre este link JSX support, espero sea de ayuda, saludos :)
Podrián ayudarme con esta duda. Según yo ambas lineas de código son equivalentes. ¿Por qué en el segundo caso me marca error ?
let newPicture = {} as Picture; // let newPicture: Picture ={};
Hola Henry 👋🏼, yo tengo entendido que no son equivalentes, ya que en la primera línea se le asigna un tipo {}(Object) a la variable newPicture de primera instancia y ya después le dices a TS que confíe en ti y lo considere como una interfaz llamada Picture, por eso no te marca ningún error. Y para el caso del segundo desde un principio le dices que su tipo es la interfaz Picture y por eso el error que te marca es un "missing properties", ya que debes cumplir con el contrato.
Muchas gracias, Alberto. Yo tmb tenia la misma duda
No entiendo cuándo puedes utilizar let o const para definir variables
puedes usar let para declarar una variable de scope o ámbito global y puedes reasignar su valor, con const declaras unan función que también puede ser global, no la puedes reasignar pero si mutarla, esto significa que puedes extender sus características o propiedades.
En javascript definir una variable con const es por que su valor no va a cambiar (hay excepcion cuando el valor es un array u objeto) de lo contrario se debe declarar con let
Ejemplo:
const paisNacimiento = 'Colombia'; //Tu pais de nacimiento nunca va a cambiar, siempre sera el mismo let cantidadGatos = 2; //La cantidad de gatos puede aumentar o disminuir
De que dependio que en la salida por consola album tenia saltos de linea y picture y newPicture no los tenia?
Lo que pasó ahí fue simplemente la consola. Esto ocurre debido a que cuando imprime un objeto con muchas propiedades empieza a incluir saltos de líneas en las propiedades para que sea más legible, pero cuando es pequeño no lo hace porque los objetos pequeños son fácil de leer.
Tengo que decir que tenía la duda de enq ue se diferenciaban "type" y "interface" a parte de su sintaxis, pero este tema de herencias soluciono mi duda, me habría gustado que se especificara desde un poco antes igual
Dentro de una interface, también pueden usar otra interface para definir como serán los elementos dentro de un objeto, por ejemplo un array de objetos.
interface Photo extends Entity { orientation: PhotoOrientation; } interface Album extends Entity { description: string; photos: Photo[] // recibe un array de objetos con las propiedades de la interface Photo } const album: Album = { id: 1, title: 'Meetups', description: 'Community events around the world', photos: [{ id: 1, title: 'Test Photo', orientation: PhotoOrientation.Portrait }, { id: 2, title: 'Another Test Photo', orientation: PhotoOrientation.Landscape }] } album.photos.push('test'); // Error! Solo puede recibir objetos con la estructura de la interface Photo
Thanks.
export {}; enum PhotoOrientation { Landscape, Portrait, Square, Panorama } interface Entity { id: number; title: string; } interface Album extends Entity { // copia de los atributos de Entity description: string; } interface Picture extends Entity { orientation: PhotoOrientation } const album: Album = { id: 1, title: 'Meetups', description: 'Community events around the world' }; const picture: Picture = { id: 1, title: 'Family', orientation: PhotoOrientation.Landscape }; let newPicture = {} as Picture; newPicture.id = 2; newPicture.title = 'Moon'; console.log('album', album); console.log('picture', picture); console.log('newPicture', newPicture);
Se puede desactivar la declaración de variables con 'as' o aserción en typescript?
Si se puede, te vas a tu archivo de configuracion y colocas lo siguiente:
{ rules: { "no-angle-bracket-type-assertion": true } }
A lo mejor se me está pasando por alto algo pero no entiendo por qué newPicture no da error si no se definió el atributo orientation?
Porque esta definido como una aserción de tipos (as) y por tanto el compilador trata a newPicture como si fuera de ese tipo pero "no le exije" que cumpla con el contrato de la Interfaz, es más flexible.
Justo me salto esta duda, la respuesta es por el as ya que no marcará error porque solamente le estas diciendo que es de tal tipo pero no que es ese tipado obligatorio.
¿Por que newPicture no marca error por la propiedad orientation de Picture?
interface Entity { id: number; title: string; } interface Picture extends Entity { orientation: PhotoOrientation; // Esta propiedad por que se omite? } let newPicture = {} as Picture; newPicture.id = 2; newPicture.title = 'Moon'; // Salida newPicture: { id: 2, title: 'Moon' }
Sabemos que newPicture toma el contrato que Picture ha creado, ¿Tiene algo que ver la aserción?
Nota: primero leer las preguntas del curso antes de preguntar.
Respuesta
Al declarar la variable newPicture hacemos una aserción de tipo indicandole a TypeScript que esa variable debe ser de tipo Picture pero no es obligatorio que contenga todas las propiedades. gajes del oficio.
Un pequeño ejemplo en otro contexto de lo que hemos trabajado.
Para clonar Objetos en JavaScript o en otros lenguajes en general, les recomiendo revisar conceptos como shallow copy y deep copy. https://stackoverflow.com/questions/184710/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy
Para clonar Objetos en JavaScript o en otros lenguajes en general, les recomiendo revisar conceptos como shallow copy y deep copy. https://stackoverflow.com/questions/184710/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy
Me parece interesante que cuando creamos un objeto de tipo Picture el compilado pide que agreguemos los elementos establecidos en la interfaz.
let newPicture = {} as Picture
Si imprimimos el valor de la variable newPicture para ver lo que tiene, sale un objeto vacío.
console.log('newPicture 1', newPicture)
parece que newPicture violó el contrato 🤔
Hola hola, un compañero en un cometario arriba tenía una duda similar y lo que yo le explicaba es que en el caso de la aserción a la variable newPicture se le asigna un tipo {}(Object) de primera instancia y ya después se le dice a TS que confíe y lo considere como una interfaz llamada Picture, por eso no marca ningún error ni “viola el contrato”. Y para el caso de la asignación explícita del tipo interfaz Picture desde su declaración requiere los atributos, es por eso que marca el error “missing properties”, ya que ahí si se incumple el contrato.
Al declarar una variable de esta forma:
let variable: number = 2;
Estás diciendo que ese espacio de memoria solo puede almacenar valores de tipo number.
.
Al hacerlo de esta otra forma (aserción):
let variable = 2 as number;
Estás diciendo que el valor (2) que se le está asignando a la variable es de tipo number, pero la variable puede contener cualquier otro tipo de dato. Es solo para ser más explícito y tener autocompletado, realmente no estas tipando la variable, solo estás declarando de que tipo es el dato que le estás asignando en ese momento.
Herencia Extención de interfaces, Los miembros definidos a una interfaz pueden ser copiados para flexibilidad y ahorro de componentes. interface NameObj extends NameObj. Cambiar el estado de los objetos.
