Herencia de clases y propiedades estáticas

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

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

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

• 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

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.

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

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…

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

la verdad si le da un plus en POO a JS

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

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

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

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

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.

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

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

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

A curious thing:

# character makes variables hide when they are called by a console.log
Keywords “private” and “protected” don’t work the same way.

SÚPER CLASE es la que dió el maestro.

Habia aprendido antes sobre clases Abstractas, pero esta clase me causo un poco de confusion, aqui dejo un post sobre el uso de clases abstractas con el uso en Angular

También pueden definir métodos estáticos de la clases:

class Picture extends Item{
    // Propiedades
    public static photoOrientation = PhotoOrientation;
    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;
    };

    public toString(): string {

        return `[
            id: ${this.id},
            title: ${this.title},
            orientation: ${this.orientation}
        ]`;
    }

    static testMethod(numTest: number): number{ // <--- Método estático
        return numTest + numTest;
    }
};

console.log(Picture.testMethod(45));
// 90

Veo que no han mostrado la diferencia entre public, protected y private, aquí les dejo las diferencias en Java (que me imagino se tomaron como base para otros lenguajes de POO como TS):

export {};

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}

//Superclase 

abstract class Item { //utilizando abstract no se puede instanciar
    //protected le da el acceso a las subclases
    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 _id: number; //a partir de ts 3.8 se puede poner 'private' como #
    // private _title: string;

    private _orientation: PhotoOrientation;

    public constructor(id: number, 
               title: string, 
               orientation: PhotoOrientation){
        super(id, title); //via la fucnion super estariamos invocando al constructor de la SUPERCLASE
        // this._id = id;
        // this._title= title;
        this._orientation = orientation;

    }

    get orientation() {
        return this._orientation;
    }

    set orientation(orientation:PhotoOrientation) {
        this._orientation = orientation;
    }

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


class Album extends Item{
    // private _id: number;  
    // private _title: string;
    private pictures: Picture[];

    constructor(id: number, title: string){
        super(id, title);
        // this._id = id;
        // this._title = title;
        this.pictures = []; //inicializamos para que la estructura este lista para recibir objetos mas adelantes
    }

    addPicture(picture: Picture) {
        this.pictures.push(picture) //accediendo a la propiedad pictures
    }
}

const album: Album  = new Album (1, 'Personal Pictures');
const picture: Picture = new Picture(1, 'Plazi Session', PhotoOrientation.Square);

album.addPicture(picture);

console.log('Album', album);

// Accediendo a los miembros publicos
console.log('Id', picture.id); //get id() 
// picture.id= 100; //private typescript invoca set id (100)
picture.title = 'Another title'; //private

album.title = 'Personal Activities'; //Private
console.log('Album', album);

console.log('Photo Orientation', Picture.photoOrientation.Panorama);

por defecto las propiedades estáticas son publicas
esta propiedad accede dentro de la class

Propiedades estáticas
por medio de la palabra reservada static se puede definir un miembro visible a nivel de clase.

¡Muy buena explicación!

Estáticas, las clases pueden definir un miembro visible(scope clase), static. Acceder para leer.

Ts soporta este patron comun del mundo POO

Implementa la habilidad de extender codigo de clases existentes a traves de la Herencia

//Super clase
class Item{
//protected nos da la posibilida de crear una propiedad
//que sea accesible para las clases hijas pero inaccesible para otros contextos
	protected _id: number;
	protected _title: string;

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

	get id() {
    return this._id;
  }
  set id(id: number) {
     this._id = id;
  }
}

class Picture extends Item {
	public contructor(id: number, title: string){
		//invocamos al contructor del padre
		super(id, title)
	}
}

Las clases abstractas son la base de donde otras clases podran derivarse.

A diferencia de una interfaz, una clase abstracta puede implementar funciones para sus instancias

Al ser una clase general con el proposito de generar un patron para aquellos que la implementen no se puede instanciar un objeto directamente desde una clase abstracta

abstract class Item{
	static photoOrientation = PhotoOrientation;
	protected readonly  _id: number;
	protected _title: string;

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

	get id() {
    return this._id;
  }
  set id(id: number) {
     this._id = id;
  }
}

aquí usamos el patron POO.