Cursos Empresas Blog Live Conf Eventos Precios

0:0014:02

Clases

Clase 24 de 32

Clase 24 / 32

Miguel Angel Reyes Moreno

No sé si han sido curiosos, pero nos estamos ahorrando mucho código en JS con el poder de TS, solamente comparen: Código en TS:

export {}

enum PhotoOrientation{
  Landscape,
  Portrait,
  Square,
  Panorama
}

class Picture {
  //* Propiedades
  id: number
  title: string
  orientation: PhotoOrientation

  //*Atributos que se consideran necesarios para construir objetos
  constructor(id: number, title: string, orientation: PhotoOrientation) {
    this.id = id
    this.title = title
    this.orientation = orientation
  }

  //*Comportamiento
  toString() {
    return `
    [
      id: ${this.id},
      title: ${this.title},
      orientation: ${this.orientation}
    ]
    `
  }
}

class Album {
  id: number
  title: string
  pictures: Picture[]

  constructor(id: number, title: string) {
    this.id = id
    this.title = title
    this.pictures = [] //*Inicializamos el array vacío
  }

  addPicture(picture: Picture) {
    this.pictures.push(picture)
  }
}

const album: Album = new Album(1, 'Personal Pictures')
const picture: Picture = new Picture(1, 'Selfie', PhotoOrientation.Square)
album.addPicture(picture)

//console.table(album)
//console.table(picture)
//console.table({picture})
console.log(album) //* Imprime el objeto
console.table({album}) //* Como manejamos un objeto, podemos usar console.table
console.table(album.pictures) //* Como tenemos un array dentro del objeto, también podemos usar console.table

Código en JS:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PhotoOrientation;
(function (PhotoOrientation) {
    PhotoOrientation[PhotoOrientation["Landscape"] = 0] = "Landscape";
    PhotoOrientation[PhotoOrientation["Portrait"] = 1] = "Portrait";
    PhotoOrientation[PhotoOrientation["Square"] = 2] = "Square";
    PhotoOrientation[PhotoOrientation["Panorama"] = 3] = "Panorama";
})(PhotoOrientation || (PhotoOrientation = {}));
class Picture {
    //*Atributos que se consideran necesarios para construir objetos
    constructor(id, title, orientation) {
        this.id = id;
        this.title = title;
        this.orientation = orientation;
    }
    //*Comportamiento
    toString() {
        return `
    [
      id: ${this.id},
      title: ${this.title},
      orientation: ${this.orientation}
    ]
    `;
    }
}
class Album {
    constructor(id, title) {
        this.id = id;
        this.title = title;
        this.pictures = []; //*Inicializamos el array vacío
    }
    addPicture(picture) {
        this.pictures.push(picture);
    }
}
const album = new Album(1, 'Personal Pictures');
const picture = new Picture(1, 'Selfie', PhotoOrientation.Square);
album.addPicture(picture);
//console.table(album)
//console.table(picture)
//console.table({picture})
console.log(album); //* Imprime el objeto
console.table({ album }); //* Como manejamos un objeto, podemos usar console.table
console.table(album.pictures); //* Como tenemos un array dentro del objeto, también podemos usar console.table

Comentarios (24)24 comentarios

Alan Quispe

Hace 6 años

Definitivamente amo TypeScript

Miguel Peláez

Es demasiado bien estructurado. Muy poderoso

Moisés Manuel Morín Hevia

Es Js con poderes xD

Podemos hacer console.log del objeto También podemos hacer console.table de ese mismo objeto Y como tenemos un array en el objeto, podemos hacer también console.table de ese array dentro del objeto.

Reinaldo Mendoza

el table es un trucazo

Hector Rubi Garcia

Victoria Ramirez Charles

Jaime David Burbano Montoya

Andres Felipe Pinchao Ramirez

Excelentes notas ! muchas gracias.

Avilio Fernando Amador Soto

Gracias por el aporte. nada más me fijé que te hizo falta agregar el tipo de PhotoOrientation en la const picture.

Luis Abdel Rangel Castro

Jhon Mario Lotero Salazar

Cuando es mejor usar interfaces y cuando clases?

Edwin Alberto López Almira

Las interfaces estan más orientadas en comportamientos, es decir, en métodos que pueden estar en más de una familia. Por ejemplo: Puedes tener las familias de clases Medicinas y Comida, en principio tienen atributos muy distintos, pero comparten el comportamiento de "ingerirse".

Las clases definen atributos y comportamientos que pueden heredarse a clases hijas, pero no a clases que esten en otras familias; las interfaces pueden heredarse o usarse independientemente de la familia de clases en la que se llame.

Espero que te pueda ayuda, suerte en tu aprendizaje :D

José Heriberto López Ruiz

Una interfaz no define lo que hacen los métodos, solamente define la estructura que deben tener las clases que implementan dicha interfaz (es decir, define qué funciones debes de implementar obligatoriamente, pero no te especifica lo que deban hacer exactamente). En cambio, si heredas una clase, entonces estás heredando también los comportamientos definidos en esas funciones. Es decir, si la clase que heredaste tiene algunas funciones con código definido, entonces estarás heredando también esos comportamientos con código definido. Una interfaz te obliga a que definas esas funciones, pero el heredar una clase, no te obliga a que definas esos comportamientos, porque ya están heredados.

David Gómez

Andrés Felipe Eslava Zuluaga

Pablo Cabrera

muy buen resumen bro, gracias :D

Jose Daniel Barría Reyes

Tipea las clases User, Album, Picture. La única diferencia con javascript es que usa tipos en los args.

Buena observación.

Elber Liebermen

Hace 4 años

Tengo la siguiente duda. ¿Cuál es la diferencia que hay de declarar el objeto de la forma 1 a la forma 2?

1. const album = new Album (1,'Personal Pictures');

2. const album: Album = new Album (1,'Personal Pictures');

Puedo omitir el tipo de dato ya que especifico que es un objeto instanciado de la clase Albúm?

Juan Antonio García Sánchez

Me encanta lo parecido que tiene a Java 😍

Demasiado pero más sencillo xD

Ciro Alejandro Sira Mogollon

tengo una pregunta referente al ejemplo del álbum. el profesor definió el tipo de type de las variables antes de la funcion. Es necesario definir el type en los parámetro () ya estando definido antes. no se debería haberse guardado la referencia antes.

Jimmy Buriticá Londoño

Me ha gustado la forma en que se dan las clases, primero teoría y luego un ejemplo sencillo.

Miguel Angel

Hernán Alexis Moreno Castro

"Pero veámoslo de una manera práctica"... Me encanta aprender practicando

Pracmaticidad es lo tuyo !

Clases Diferentes entidades que guardan relación en común. Abstracción de un conjunto de objetos. Propiedades & funciones. Para crear objetos con estas clases constructor(función), valores que recibo como parámetro y asignarlos a las propiedades this.propiedades.

Juan Jiménez

Axel Enrique Galeed Gutierrez

Consulta. Cuando el profesor coloca:

const album: Album = new Album(1, 'Personal Pictures');
const picture: Picture = new Picture(2, 'Platzi session', PhotoOrientation.Square);

El tipo de dato Album y Picture ¿de dónde salen?, ya que no vi que haya definido una interfaz. A la manera que yo lo interpreto es que a las clases, en TypeScript, también se las pueden usar como interfaces. Corríjanme si estoy mal. Gracias. :D

Juan Pablo Bedoya Rodriguez

code

Clases

Progreso del curso

Introducción a TypeScript

Entorno de Desarrollo

Tipos en TypeScript

Tipos Personalizados

Módulos

Cierre