A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Extensi贸n de interfaces

23/32
Recursos

Aportes 23

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

3 Ways to Clone Objects in JavaScript

Because objects in JavaScript are references values, you can鈥檛 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 鈥渢ype鈥 y 鈥渋nterface鈥 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)

<h3>Extender Interfaces</h3>

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