Cursos Empresas Blog Live Conf Eventos Precios

0:0010:54

Extensión de interfaces

Curso de TypeScript 3

Clase 23 de 32

Clase 23 / 32

Jose Manuel Montaño Saenz

Hace 5 años

¿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

Hace 5 años

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.

Comentarios (31)31 comentarios

Luis Abdel Rangel Castro

Hace 6 años

Samuel Zanón

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

I think the most used now is the spread operator

Jose Daniel Barría Reyes

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

Muy bien ! Muchas graicas.

Luis Angel

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

Buen código !

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

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

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

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

Henry Villavicencio

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

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

Muchas gracias, Alberto. Yo tmb tenia la misma duda

Marcia Castro Moya

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

Nixon Martinez

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

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?

Rafael Aguero Baez

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

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

Thanks.

Juan Jiménez

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

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

Irving Juárez

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

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

Darwin Rodríguez

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

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.

Sergio Orejarena Rueda

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

Juan Chavez Cornejo

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

Gerson Zuñiga

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.

Mauricio Galvez

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.

Extensión de interfaces

Progreso del curso

Introducción a TypeScript

Entorno de Desarrollo

Tipos en TypeScript

Tipos Personalizados

Módulos

Cierre