Herencia de clases y propiedades estáticas

Enrique Tecayehuatl

student•

Bueno aunque parezca cliché como todos ponen sus comentarios mi resúmen es:

asbtract: cuando requeires que una clase no sea instanciada protected: atributo de los miembros para que puedan ser accedidos desde su propia clase y también que puedan ser solo accedidos a quienes heredan esa clase con implements(herencia) implements: herencia claseA extends claseB { ... } static: para poder acceder a métodos/propiedades de una clase sin la necesidad de la instancia(new ClaseA()) sino const a = ClaseA.propiedad

kevin Jhordy Puscán Ortiz

student•

En qué momento utilizó implements? implements no se debería utilzar para implementar interfaces, mas no clases?

Juan Carlos Pinzón

student•

Compañero tu definición de implements es incorrecta, a lo que te refieres es a la herencia con extends

Alejandro Sebastian Dubon Estrada

student•

Nota: Por convención los nombres de las clases siempre deben ir con inicial mayúscula.

Jorge Cruz Perez

student•

Correcto y seguir la convención UpperCamelCase

Alan Quispe

student•

Seria lo ideal pero ni los mismos que diseñan las librerías en JS a veces hacen caso de esto 😒, vengo de Java

Jose Daniel Barría Reyes

student•

Herencia de clases y miembros protegidos Typescript soporta este patrón común en el mundo de la POO Implementa la habilidad de extender codigo de clases existentes a través de la herencia. Utilizamos la palabra extends para heredar Se heredan solo los atributos public o protected tenemos acceso al constructor de la clase padre super()

class Person {
	protected id:number;
	protected name:string;
	constructor(id:number, name:string){
	
	}
}
class Student extends Person {
	private active:boolean
	constructor(id:number, name:string, active:boolean){
		super(id,name)
		this.active = active
	}
}

Clases abstractas: Las clases abstractas son la base de donde otras clases podrian derivarse. A diferencia de una interfaz, una clase abstracta puede implementar funciones para sus instancias. La palabra reservada es abstract

abstract class myClass{}

++Recordar que las clases abstractas no se pueden instanciar++ Propiedades estaticas y de solo lectura Las clases por lo general definen atributos y métodos aplicables a las instancias de las mismas. A través de la palabra reservada **static ** se puede definir un miembro visible a nivel de clase Al igual que las interfaces, podemos usar la palabra reservada readonly para marcar el miembro de una clase como solo lectura

class Person {
	static personQuantity: number = 0
	protected readonly id: number
}

a las propiedades static se las accede a través de la clase

console.log(Person.personQuantity)

a las propiedades readonly no se las puede modificar

Raul Hernández

student•

Abstract, protected, extends, static, readonly

Abstract = cuando requieres que una clase no sea instanciada
Protected = Entre público y privado, para que los elementos puedan ser accedidos por la clase y subclases
Extends = herencia de SUPER clase a subclases, para invocar al constructor de la SUPERclase en las subclases usar super(propiedades)
Static = Puede acceder a métodos y propiedades de una clase sin instanciarla
Readonly = Indica propiedades que solo se pueden leer

Moisés Manuel Morín Hevia

student•

Gran resumen !

Diego Fernando Caviedes Camaho

student•

y cuando es un método abstract?

ELKIN YESID MORENO VELEZ

student•

JavaScript en su definición tan dinámica, sin tipado, tan milenial y viene Microsoft con TypeScript y le pone orden a todo ese relajo......

Hector Rubi Garcia

student•

Hasta ahora que ya se como se usan las clases abstractas Se deben utilizar cuando no queremos que se creen instancias de esta clase debido a que son demasiado generales. Excelente explicación.

Rubén Esparza

student•

Esta clase bien podría estar en un curso de OOP, impresionante clase, explicada de manera sólida, sencilla y con código.

César Palma

student•

ahora ya hay 2 cursos de poo en javascript

Jimmy Buriticá Londoño

student•

Tienes toda la razón, tenía un poco de enredos en mi cabeza con este tema de la herencia y en una sola clase lo entendí.

silvana murgo

student•

export {};

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}
// SUPERclase
abstract class Item {
    protected readonly _id: number;
    protected _title: string;

    constructor(id: number, title: string) {
        this._id = id;
        this._title = title;
    }

    get id() {
        return this._id;
    }
    // set id(id: number) {
    //     this._id = id;
    // }
    get title() {
        return this._title;
    }
    set title(title: string) {
        this._title = title;
    }
}


// get y set

class Picture extends Item{
    public static photoOrientation = PhotoOrientation;
    // Propiedades
    private _orientation: PhotoOrientation;

    public constructor(id: number, 
                title: string, 
                orientation: PhotoOrientation) {
        super(id, title);
        this.orientation = orientation;
    }
    get orientation() {
        return this._orientation;
    }
    set orientation(o: PhotoOrientation) {
        this._orientation = o;
    }

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

class Album extends Item{
    private pictures: Picture[];

    public constructor(id: number, title: string) {
        super(id, title);// constructor de SUPER clase
        this.pictures = [];
    }
    public addPicture(picture: Picture) {
        this.pictures.push(picture);
    }
}

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

// Accediendo a los miembros publicos
console.log('picture.id', picture.id); // get id()
// picture.id = 100; // private, set id(100);
picture.title = 'Another title'; // private
album.title = 'Personal Activities'; //private
console.log('album', album);

// const item = new Item(1, 'Test title');
// console.log('item', item);

// Probar el miembro estatico
console.log('PhotoOrientation', Picture.photoOrientation.Landscape);

Camilo

student•

Como saber cuando usar Interfaces y cuando usar Clase???

Daniel Meza

student•

Utiliza interfaces siempre. Cuando la complejidad de lo que estás haciendo te requiera usar modelos con clases entonces sí, usa clases 🔥

Cristian Blandon

student•

No nos vayamos a los extremos... Las interfaces se crearon para alojar la shape (forma) de objetos puntuales; decir que siempre se deben utilizar interfaces es como decir que siempre se deben utilizar objetos literales.
Las clases no son propias de TypeScript, son propias de JavaScript, e incluso, por su funcionamiento "under the hood" (por detrás), pueden optimizar el uso de memoria y rendimiento.
Las interfaces se deben utilizar siempre como la forma de "tipar" un objeto en TypeScript, nunca llegarán a reemplazar una clase (ni sencilla ni compleja). Incluso, una instancia de una clase se puede tipar a través de una interface.
Siempre que vayas a hacer Programación orientada a objetos, y tengas varios "moldes" (clases) de los cuales se vayan a instanciar constantemente objetos, usa Clases, tanto en TypeScript como en JavaScript.

Jorge Méndez Ortega

student•

la verdad si le da un plus en POO a JS

Moisés Manuel Morín Hevia

student•

Totalmente, hace muy práctico.

Andrés Felipe Eslava Zuluaga

student•

Super Clases:

Al igual que las interfaces, las clases también pueden heredar atributos y propiedades. |-> Implementa la habilidad de extender código de clases existentes a través de la herencia
Modificador de acceso protected que permite un acceso ni público ni privado. Dan acceso a los miembros cuando las subclases requieran usarlos.
super(): Sirve para invocar al constructor de una SUPERCLASE. Un objeto que instancie la (super)clase, va a tener inicializado las variables que dentro de la superclase fueron declaradas

Clases Abstractas:

Son la base de donde otras clases pueden derivarse. Implementa funciones para sus instancias . abstract es la palabra reservada
Se usan cuando una super clase llega a ser demasiado general y queremos evitar crear instacias a partir de la misma.
La palabra reservada static se usa para definir un miembro visible a nivel de clase.
Se usa la palabra reservada readonly para marcar un miembro de una clase como solo lectura.

export {}

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama,
};
//superclase
abstract class Item {
    protected readonly _id: number;
    protected _title: string;

    constructor(id: number, title: string) {
        this._id = id;
        this._title = title;
    }

    get id() { return this._id }
    // set id(id: number) {this._id = id} // La definición de _id es inservible.
    
    get title() { return this._title }
    set title(t: string) {this._title = t}
}
// clase picture
class Picture extends Item {
    public static photoOrientation = PhotoOrientation;
    private _orientation: PhotoOrientation;
    public constructor( id: number, title: string, orientation: PhotoOrientation ) {
        super(id, title);
        this._orientation = orientation;
    }

    private toString() {
        return `[id: ${this._id}, title: ${this._title}, orientation: ${this._orientation}]`
    }
}
// clase album
class Album extends Item{
    private _pictures: Picture[];

    public constructor( id: number, title: string ) {
        super(id, title);
        this._pictures = [];
    }

    get picture() { return this._pictures }
    set picture(pic:Picture[]) {this._pictures = pic}

    public addPicture(picture: Picture) {
        this._pictures.push(picture);
    }
}

let album: Album = new Album(100, 'Photos of mine');
const newPic: Picture = new Picture(2, 'my new pic!', PhotoOrientation.Panorama);
const new2Pic: Picture = new Picture(3, 'my 2nd new pic!', PhotoOrientation.Portrait);
const new3Pic: Picture = new Picture(4, 'my 3rd new pic!', PhotoOrientation.Portrait);

// Primer estado del álbum
console.log('album inicial-> ', album);

//cambiar id de álbum ó fotos
/* new2Pic.id = 300;   Se hacen inútiles debido
new3Pic.id = 400;      a la propiedad de readonly   */

//cambiar titulo de álbum
album.title = 'Mi nuevo álbum de fotos !';

//agregar más fotos a mi álbum
album.addPicture(newPic);
album.addPicture(new2Pic);
album.addPicture(new3Pic); 
console.log('album modificado -> ', album);

// const item = new Item(1, 'Test Title'); // Realmente no tiene sentido usar ésto,
// console.log('item', item)               // pues Item es muuy general.

console.log('PhotoOrientation', PhotoOrientation);

Sebastian Diaz

student•

Que bueno es venir de Java a TypeScript, eso si con los conceptos de POO bien claros :D

Alex Camacho

teacher•

TypeScript soporta la herencia, con esto implementa la habilidad de extender código de clases existentes a otras.

Utilizamos la palabra extends para heredar, si heredamos sólo se heredan los atributos public o protected.

class Person {
	protected id:number;
	protected name:string;
	constructor(id:number, name:string){
	
	}
}
class Student extends Person {
	private active:boolean
	constructor(id:number, name:string, active:boolean){
		super(id,name)
		this.active = active
	}
}

En las clases de TypeScript se tienen disponibles las clases abstractas, estas son la base de donde otras clases podrían derivarse. A diferencia de una interface, una clase abstracta puede implementar funciones para sus instancias.

abstract class Person {}

Obed Paz

student•

Me esta gustando mucho TS, me recuerda a cuando empecé con C# en la Universidad pero terminé odiandolo por la forma en que me lo enseñaban, TS me esta ayudando a darle un segundo oportunidad.

Fabian Andres Ramirez Vela

student•

No entiendo porque elimina la linea 67, alguien me puede ayudar?. Gracias

Moisés Manuel Morín Hevia

student•

Por que ya está heredado de la super clase Item

Anyelo Leonardy Alvarez Baquero

student•

Debía eliminarla en la clase anterior, en la de los métodos get y set, pero se le pasó. Hasta ahora vio el error.

Juan Carlos Valencia López

student•

ésta clase me gustó más que todas hasta el momento

Laura Roa

student•

copie el codigo de esta clase y me da un error: ++Property '_orientation' has no initializer and is not definitely assigned in the constructor++ Saben que puede estar pasando?

export {};

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}
// SUPERclase
abstract class Item {
    protected readonly _id: number;
    protected _title: string;

    constructor(id: number, title: string) {
        this._id = id;
        this._title = title;
    }

    get id() {
        return this._id;
    }
    // set id(id: number) {
    //     this._id = id;
    // }
    get title() {
        return this._title;
    }
    set title(title: string) {
        this._title = title;
    }
}

// get y set

class Picture extends Item{
    public static photoOrientation = PhotoOrientation;
    // Propiedades
    private _orientation: PhotoOrientation; // ++ESTA LINEA MARCA ERROR++

    public constructor(id: number, 
                title: string, 
                orientation: PhotoOrientation) {
        super(id, title);
        this.orientation = orientation;
    }
    get orientation() {
        return this._orientation;
    }
    set orientation(o: PhotoOrientation) {
        this._orientation = o;
    }

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

class Album extends Item{
    private pictures: Picture[];

    public constructor(id: number, title: string) {
        super(id, title);// constructor de SUPER clase
        this.pictures = [];
    }
    public addPicture(picture: Picture) {
        this.pictures.push(picture);
    }
}

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

// Accediendo a los miembros publicos
console.log('picture.id', picture.id); // get id()
// picture.id = 100; // private, set id(100);
picture.title = 'Another title'; // private
album.title = 'Personal Activities'; //private
console.log('album', album);

// const item = new Item(1, 'Test title');
// console.log('item', item);

// Probar el miembro estatico
console.log('PhotoOrientation', Picture.photoOrientation.Landscape);

Santiago Mendoza

student•

Si los metodos get/set no van a hacer nada mas que asignar el valor, conviene mejor declararlos public? o que otra ventaja tiene ademas de hacer algo intermedio antes de asignar el valor?

Daniel Meza

student•

Esa es la función como tal. Devolver el valor de tu variable. Es importante no permitir la modificación desde afuera, y que sólo a través de set y get puedas manipularla.

Eduardo Robles

student•

no me deja acceder a la propiedad static de la clase picture alguien sabe porque?

class Picture extends Item
{
    public static PictureOrientation = PictureOrientation;
    //Propiedades
    private _orientation: PictureOrientation;

Diego Fernando Caviedes Camaho

student•

que quieres hacer

Armando Alamilla Cuellar

student•

Wow, es una clase muy completa. Me ayudó mucho a repasar conceptos que ya no recordaba sobre la programación orientada a objetos. Que buen profesor

class Person {
	protected id:number;
	protected name:string;
	constructor(id:number, name:string){
	
	}
}
class Student extends Person {
	private active:boolean
	constructor(id:number, name:string, active:boolean){
		super(id,name)
		this.active = active
	}
}

export {};

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}
// SUPERclase
abstract class Item {
    protected readonly _id: number;
    protected _title: string;

    constructor(id: number, title: string) {
        this._id = id;
        this._title = title;
    }

    get id() {
        return this._id;
    }
    // set id(id: number) {
    //     this._id = id;
    // }
    get title() {
        return this._title;
    }
    set title(title: string) {
        this._title = title;
    }
}


// get y set

class Picture extends Item{
    public static photoOrientation = PhotoOrientation;
    // Propiedades
    private _orientation: PhotoOrientation;

    public constructor(id: number, 
                title: string, 
                orientation: PhotoOrientation) {
        super(id, title);
        this.orientation = orientation;
    }
    get orientation() {
        return this._orientation;
    }
    set orientation(o: PhotoOrientation) {
        this._orientation = o;
    }

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

class Album extends Item{
    private pictures: Picture[];

    public constructor(id: number, title: string) {
        super(id, title);// constructor de SUPER clase
        this.pictures = [];
    }
    public addPicture(picture: Picture) {
        this.pictures.push(picture);
    }
}

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

// Accediendo a los miembros publicos
console.log('picture.id', picture.id); // get id()
// picture.id = 100; // private, set id(100);
picture.title = 'Another title'; // private
album.title = 'Personal Activities'; //private
console.log('album', album);

// const item = new Item(1, 'Test title');
// console.log('item', item);

// Probar el miembro estatico
console.log('PhotoOrientation', Picture.photoOrientation.Landscape);

export {}

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama,
};
//superclase
abstract class Item {
    protected readonly _id: number;
    protected _title: string;

    constructor(id: number, title: string) {
        this._id = id;
        this._title = title;
    }

    get id() { return this._id }
    // set id(id: number) {this._id = id} // La definición de _id es inservible.
    
    get title() { return this._title }
    set title(t: string) {this._title = t}
}
// clase picture
class Picture extends Item {
    public static photoOrientation = PhotoOrientation;
    private _orientation: PhotoOrientation;
    public constructor( id: number, title: string, orientation: PhotoOrientation ) {
        super(id, title);
        this._orientation = orientation;
    }

    private toString() {
        return `[id: ${this._id}, title: ${this._title}, orientation: ${this._orientation}]`
    }
}
// clase album
class Album extends Item{
    private _pictures: Picture[];

    public constructor( id: number, title: string ) {
        super(id, title);
        this._pictures = [];
    }

    get picture() { return this._pictures }
    set picture(pic:Picture[]) {this._pictures = pic}

    public addPicture(picture: Picture) {
        this._pictures.push(picture);
    }
}

let album: Album = new Album(100, 'Photos of mine');
const newPic: Picture = new Picture(2, 'my new pic!', PhotoOrientation.Panorama);
const new2Pic: Picture = new Picture(3, 'my 2nd new pic!', PhotoOrientation.Portrait);
const new3Pic: Picture = new Picture(4, 'my 3rd new pic!', PhotoOrientation.Portrait);

// Primer estado del álbum
console.log('album inicial-> ', album);

//cambiar id de álbum ó fotos
/* new2Pic.id = 300;   Se hacen inútiles debido
new3Pic.id = 400;      a la propiedad de readonly   */

//cambiar titulo de álbum
album.title = 'Mi nuevo álbum de fotos !';

//agregar más fotos a mi álbum
album.addPicture(newPic);
album.addPicture(new2Pic);
album.addPicture(new3Pic); 
console.log('album modificado -> ', album);

// const item = new Item(1, 'Test Title'); // Realmente no tiene sentido usar ésto,
// console.log('item', item)               // pues Item es muuy general.

console.log('PhotoOrientation', PhotoOrientation);

class Person {
	protected id:number;
	protected name:string;
	constructor(id:number, name:string){
	
	}
}
class Student extends Person {
	private active:boolean
	constructor(id:number, name:string, active:boolean){
		super(id,name)
		this.active = active
	}
}

export {};

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}
// SUPERclase
abstract class Item {
    protected readonly _id: number;
    protected _title: string;

    constructor(id: number, title: string) {
        this._id = id;
        this._title = title;
    }

    get id() {
        return this._id;
    }
    // set id(id: number) {
    //     this._id = id;
    // }
    get title() {
        return this._title;
    }
    set title(title: string) {
        this._title = title;
    }
}

// get y set

class Picture extends Item{
    public static photoOrientation = PhotoOrientation;
    // Propiedades
    private _orientation: PhotoOrientation; // ++ESTA LINEA MARCA ERROR++

    public constructor(id: number, 
                title: string, 
                orientation: PhotoOrientation) {
        super(id, title);
        this.orientation = orientation;
    }
    get orientation() {
        return this._orientation;
    }
    set orientation(o: PhotoOrientation) {
        this._orientation = o;
    }

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

class Album extends Item{
    private pictures: Picture[];

    public constructor(id: number, title: string) {
        super(id, title);// constructor de SUPER clase
        this.pictures = [];
    }
    public addPicture(picture: Picture) {
        this.pictures.push(picture);
    }
}

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

// Accediendo a los miembros publicos
console.log('picture.id', picture.id); // get id()
// picture.id = 100; // private, set id(100);
picture.title = 'Another title'; // private
album.title = 'Personal Activities'; //private
console.log('album', album);

// const item = new Item(1, 'Test title');
// console.log('item', item);

// Probar el miembro estatico
console.log('PhotoOrientation', Picture.photoOrientation.Landscape);

Herencia de clases y propiedades estáticas

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