Extensión de interfaces

Luis Abdel Rangel Castro

student•

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: '🥓' }

Samuel Zanón

student•

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);

Miguel Angel Reyes Moreno

student•

I think the most used now is the spread operator

Jose Daniel Barría Reyes

student•

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
}

Moisés Manuel Morín Hevia

student•

Muy bien ! Muchas graicas.

Luis Angel

student•

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.

Boris Vargas Paucara

student•

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);

Moisés Manuel Morín Hevia

student•

Buen código !

Miguel Angel Reyes Moreno

student•

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})

Jose Cortes Jaramillo

student•

Cuál es la diferencia entre asignar el tipo a una variable con ':' y con 'as', ejemplo. let picture: Picture; let picture = { } as Picture;

Edgar López Rangel

student•

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)

Jorge Cruz Perez

student•

Interesante pregunta, encontre este link JSX support, espero sea de ayuda, saludos :)

Henry Villavicencio

student•

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 ={};

Alberto Camarena

student•

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.

Ariel Claudio Sitta

student•

Muchas gracias, Alberto. Yo tmb tenia la misma duda

Marcia Castro Moya

student•

No entiendo cuándo puedes utilizar let o const para definir variables

Nixon Martinez

student•

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.

Yamid Vélez Muñoz

student•

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

Jorge Cruz Perez

student•

De que dependio que en la salida por consola album tenia saltos de linea y picture y newPicture no los tenia?

Rafael Aguero Baez

student•

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.

yerson lasso

student•

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

Alejandro Barrios

student•

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

Moisés Manuel Morín Hevia

student•

Thanks.

Juan Jiménez

student•

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);

Gustavo Gonzalez Montero

student•

Se puede desactivar la declaración de variables con 'as' o aserción en typescript?

Irving Juárez

student•

Si se puede, te vas a tu archivo de configuracion y colocas lo siguiente:

{
  rules: {
    "no-angle-bracket-type-assertion": true
  }
}

Darwin Rodríguez

student•

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?

David Prieto Cornejo

student•

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.

Moisés Manuel Morín Hevia

student•

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.

Jose Manuel Montaño Saenz

student•

¿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?

Jose Manuel Montaño Saenz

student•

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.

Sergio Orejarena Rueda

student•

Un pequeño ejemplo en otro contexto de lo que hemos trabajado.

Juan Chavez Cornejo

student•

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

Juan Chavez Cornejo

student•

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

Hector Rubi Garcia

student•

Me parece interesante que cuando creamos un objeto de tipo Picture el compilado pide que agreguemos los elementos establecidos en la interfaz.

. El profesor utiliza la aserción de tipos con la sintaxis as

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)

Gerson Zuñiga

student•

parece que newPicture violó el contrato 🤔

Alberto Camarena

student•

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.

Mauricio Galvez

student•

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.

Moisés Manuel Morín Hevia

student•

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.

Extensión de interfaces

Introducción a TypeScript

El lenguaje de programación TypeScript

Instalación de herramientas para TypeScript

Instalación de herramientas en Windows

Navegación y refactorización

Entorno de Desarrollo

El compilador de TypeScript

El archivo de configuración de TypeScript

Mi primer proyecto TypeScript

Tipos en TypeScript

Tipado en TypeScript

Number, Boolean y String

Any

Void y never

null y undefined

Object

Array

Tupla

Enum

Unión de Tipos, Alias y Tipos Literales

Aserciones de tipo

Funciones en TypeScript

Resumen

Tipos Personalizados

Interfaces

Interfaces: propiedades opcionales

Extensión de interfaces

Clases

Clases públicas y privadas

Métodos Get y Set

Herencia de clases y propiedades estáticas

Resumen

Módulos

Principios de responsabilidad única

Resolviendo módulos

Webpack y agrupación de Módulos

Cierre

Cierre