Extensión de interfaces

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

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
}

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

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

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

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

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

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.

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

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.

.

las interfaces permiten usar extensiones, esto ayuda bastante al momento de programar casi igual que usar POO.

Excelente, siempre tuve el impedimento de unificar atributos de algunas interfaces y tenía que hacer objetos para poder usarlas en varios lugares, ahora todo eso lo veo con otros ojos. Gracias 😄

No debería utilizar implements para implementar una interfaz o es lo mismo utilizar extends e implements?

Por eso me gusta también GraphQL, porque es muy similar 😃
Aprendí primero GraphQL antes que typescript (realmente sabía pero no en detalle, sólo usaba por aprendizaje implícito)

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.

enum PhotoOrientation {
	Landscape,
	Portrairt,
	Square,
	Panorama
}

interface Entity{
	id: number;
	title: string;
}

interface Album extends Entity{
	description: string;
}

interface Picture extends Entity{
	orientation: PhotoOrientation;
}

const album: Album = {
	id: 1,
	title: 'Meetups,
	description; 'community events around the world'
};

EXTENSION DE 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.

export{};

enum PhotoOrientation {

  Landscape,
  Portrait,
  Square,
  Panorama
}

//Existen ocasiones en las que definimos interfaces que tienen los mismos atributos
  //Para ahorrar escribir las mismas lineas lo que hacemos escribir la plabra reservada extends
    //Para poder heredar los atributos de una interface y poder utilizarlos en otra
interface Entity{
  id:number;
  title:string;
}

interface Album extends Entity{
  //id:number;
  //title:string;
  description:string;
  
}

interface Picture extends Entity{

  //id:number;
  //title:string;
  orientation:PhotoOrientation;

}

const album:Album = {
  id: 1,
  title: 'zoro',
  description: 'el espadachin',
}

const picture:Picture = {
  id:2,
  title: 'family',
  orientation: PhotoOrientation.Landscape
  
}
//Podremos utilizar la asercion de tipos en este caso con la entidad picture
let newPicture = {} as Picture;

//Tambien podemos cambiar el estado de el objeto
newPicture.id = 2;
newPicture.title = 'Moon';

console.log(album);
console.log(picture);
console.log(newPicture);

Pregunta mi gente bella programadora.

tanto en la interfaz Entity como en Picture no se le pasan propiedades opcionales, y abajo cuando declaramos la variable newPicture como objeto vació y que es de tipo Picture no se le asigna una orientación pero no bota error. Por qué?

• Las interfaces ayudan a poder heredar propiedades entre los componentes.
• Pueden extenderse unas a otras, lo que permite copiar miembros ya definidos en una interfaz a otra.
• Flexibilidad.
• Reusabilidad.

<code>export {}

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama,
};

interface Entity {
    id: number;
    title: string;
}

interface Album extends Entity{
    description: string;
}

interface Picture extends Entity{
    orientation: PhotoOrientation
}

const album: Album = {
    id: 1,
    title: 'Meetups',
    description: 'Community events around the world'
};

let picture: Picture = {
    id: 2,
    title: 'Family',
    orientation: PhotoOrientation.Landscape
};

let newPicture = {} as Picture;
newPicture.id = 3;
newPicture.title = 'titleOfPicture';

console.log('album', album);

console.log('picture', picture);

console.log('newPicture', newPicture);