Clases públicas y privadas

Clase 25 de 32 • Curso de TypeScript 3

Clase anteriorSiguiente clase

Angelo Zambrano

student•

Para solucionar el "error" al colocar # sólo hay que cambiar el target en el tsconfig.json:

Alan Quispe

student•

con razón a mi no me salia error

Andres Evaristo Ruiz Gonzalez

student•

Muchas gracias!

Dennis Adrian Guzman Betancur

student•

Un pequeño tip sobre la pronunciación de la palabra private Es común para nosotros latino pronunciarla como priveit. Diría que un 95% de latinos la pronuncian así. Pero la correcta pronunciación sería algo como praivt pudiendo poner también una e en la última sílaba praivet

Moisés Manuel Morín Hevia

student•

"priviet" es la pronucnación de Hola ! en ruso (:

Jimmy Buriticá Londoño

student•

También vamos aprendiendo ingles, gracias.

Jose Daniel Barría Reyes

student•

Clases - miembros públicos: define un modificador de acceso publico por defecto para los miembros de la clase. También es posible marcar un miembro como publico usando la palabra reservada public Clases - miembros privados: define una manera propia de declarar o marcar un miembro como privado usando la palabra reservada private

class Person{
	private id:number;
	private name: string;
	public constructor(){}
	public getName(){
		return this.name
	}
}

Miembros privados ECMAScript: soporta (a partir de la versión 3.8) la nueva sintaxis JavaScript para miembros privados: #atributo. Esta caracteristica puede ofrecer mejores garantias de aislamiento en miembros privados

class Person{
	#id:number;
	#name: string;
	public constructor(){}
	public getName(){
		return this.#name
	}
}

++Para que VSCode no nos tire errores por usar esta sintaxis, instalar JavaScript and TypeScript Nightly++

Usar la sintaxis # para miembros privados es mejor porque nos garantiza encapsular nuestros miembros privados. a diferencia de usar private

Anderson Peñaloza

student•

typescript tiene un metodo llamado set que permite crear un atributo virtual con el cual podemos llenar nuestra propiedad privada y seria asi

Class Album{
	private _id: number

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

de esta forma usaramos el set de la siguiente forma

let album new Album();
album.id = 3;

si vemos que el metodo privado se llama _id y es privado pero usando el metodo id declarado con la palabra set hemos creado un atributo virtual que sirve para acceder a la propiedad privada, con esto podemos validar desde el metodo set y por ejemplo no permitir modificar si el metodo ya tiene un valor algo mas o menos asi

set id(id:number){
	if (this._id === undefined){
		this._id = id
	}
}

y externamente todo funcionará como si se tratase de un atributo publico

Gerson Montenegro

student•

Aún agregando la extensión sugerida, el error sigue apareciendo. Debemos agregar una propiedad a nuestro archivo tsconfig.json: { "compilerOptions": { ... "target": "es5" } }

José Antonio Torres

student•

tienes que cambiar a "es6"

Gustavo Gonzalez Montero

student•

También puedes usar esta: "target": "es2016",

Obed Paz

student•

Es como si C# y JS hubieran tenido un hijo.

Reinaldo Mendoza

student•

C# es aun mas ordenadito

Iván Camilo González Alvarado

student•

Sugiero usar CTRL + D para seleccionar los public que quieran pasar a private y no cambiar de uno en uno, les ahorra un poco de tiempo.

Andrés Felipe Eslava Zuluaga

student•

TS define un modificador de acceso publico por defecto para los miembros de clase ( public )
TS define un modificador de acceso privado para los miembros que no se deseen ser leídos por fuera de la clase ( private )

con TS se tiene una sintaxis para métodos privados. Usando el signo # antes del nombre del miembro de clase: p.e. #atributo Esto se hace debido a que ofrece garantías de aislamiento en miembros privados. ( Private identifiers are only available when targeting ECMAScript 2015 and higher. )

export {}

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama,
};

class Picture {
    // properties
    #id: number;
    #title: string;
    #orientation: PhotoOrientation;
    //constructor
    public constructor( id: number, title: string, orientation: PhotoOrientation ) {
        this.#id = id;
        this.#title = title;
        this.#orientation = orientation;
    }
    //Performance
    private toString() {
        return `[id: ${this.#id}, title: ${this.#title}, orientation: ${this.#orientation}]`
    }
}

class Album {
    #id: string;
    #title: string;
    #pictures: Picture[];

    public constructor( id: string, title: string ) {
        this.#id = id;
        this.#title = title;
        this.#pictures = [];
    }    

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

let album: Album = new Album('stories-1', 'Photos of mine');
/** Don't care about commented code below. The classes has private members, the output will be empty  */
// 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);
// album.addPicture(newPic); there's an error due to private class props
// album.addPicture(new2Pic); there's an error due to private class props
// album.addPicture(new3Pic);  there's an error due to private class props
console.log('album -> ', album);

DAVID Pareja Arango

student•

Cordial saludo. Creo que el título de este vídeo debería reformularse, ya que como tal vemos los miembros públicos y privados de las clases, no que las clases van a ser públicas o privadas. La verdad me he confundido al leer el título, porque no le veo sentido a por ejemplo tener una clase privada o ¿Si tiene sentido?

Jair Israel Avilés Eusebio

student•

En la mayoria de los casos no, aunque si aplicas patrones de diseño, el patron Singleton se define con un constructor privado y metodos publicos para su implementacion. Al final son bases de POO.

David Santiago Hurtado Betancourt

student•

private vs # (hash) ‎

‎ PRIVATE Cuando usas la palabra reservada private en un atributo, e intentas acceder a ella fuera de la clase, el compilador de typescript te dará un error. Hay varias formas de evitar este error, por ejemplo, usando una aserción de tipo:

const miObjeto = new MiClase();
console.log((miObjeto as any).propiedadPrivada);

Esto no da errores, y ebn cambio sí se puede acceder a la propiedad privada a la hora de ejecutar el archivo JavaScript. ‎ ‎ # (HASH) En cambio, con el # hash, que hace parte de la sintaxis de Ecmascript 2015, vuelve al atributo realmente privado, incluso en el archivo JavaScript que genera el compilador. De igual forma, si sigues intentando acceder al atributo fuera de la clase, typescript te arrojará un error. ‎ https://stackoverflow.com/questions/59641564/what-are-the-differences-between-the-private-keyword-and-private-fields-in-types

Reinaldo Mendoza

student•

Prefiero private

Jorge Méndez Ortega

student•

existe la manera de decirle a TS que al transplilar mitifique el código?

Hector Rubi Garcia

student•

Encontré que en este enlace alguien pregunta algo similar y mencionan que como tal el compilador de TypeScript no soporta esta opción pero que se puede utilizar alguna herramienta independiente para este fin.

Espero que esto ayude 😉

Alex hernandez mitre

student•

¿que es mitificar el código?

Carlos Javier Bazan Huaman

student•

private y public, muy similar a C#.

Alan Quispe

student•

Es una pena yo que estaba feliz con private :'(, y pense que # era algo así como protected

Moisés Manuel Morín Hevia

student•

Seamos felices con ambos (:

Juan Jiménez

student•

export {};

// TypeScript 3.8

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}

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

    public constructor(id: number, 
                title: string, 
                orientation: PhotoOrientation) {
        this.#id = id;
        this.#title = title;
        this.#orientation = orientation;
    }

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

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

    public constructor(id: number, title: string) {
        this.#id = id;
        this.#title = title;
        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
// picture.id = 100; // private
// picture.title = 'Another title'; // private
// album.title = 'Personal Activities'; //private
console.log('album', album);

Martín S. Campos

student•

Les comparto los 4 tipos de encapsulamiento que puede tener una atributo o función. Por lo general protected se utiliza en herencia, esto se verá en las próximas clases.

Diego Fernando Caviedes Camaho

student•

Encapsulación , modificadores de acceso private, public,

Pablo Andres Fajardo Ruano

student•

En la actualidad 2022 no es necesario instalar JavaScript and TypeScript ,ya que en consola si te imprime el mismo resultado de que si lo instalaras

Miguel Angel Reyes Moreno

student•

Quise mostrar todas las imágenes así que, en el archivo 'clases-private.ts' escribí esta función:

public showPictures(){
    for (let index = 0; index < this.pictures.length; index++) {
      console.log(`Soy el índice ${index}`)
      console.table(this.pictures[index])
    }
  }

Creé unas variables extras para ponerlo a prueba:

const album: Album = new Album(1, 'Personal Pictures')
const picture: Picture = new Picture(1, 'Selfie', PhotoOrientation.Square)
const picture2: Picture = new Picture(2, 'Selfie2', PhotoOrientation.Landscape)
const picture3: Picture = new Picture(3, 'Selfie3', PhotoOrientation.Portrait)
album.addPicture(picture)
album.addPicture(picture2)
album.addPicture(picture3)

console.log(album) //* Imprime el objeto
console.table({album}) //* Como manejamos un objeto, podemos usar console.table
album.showPictures()

Resultado:

Michael Juarez

student•

“pribeit…”

Moisés Manuel Morín Hevia

student•

Priviet es hola en ruso xD

Andres Felipe Pinchao Ramirez

student•

CLASES PUBLICAS Y PRIVADAS

TypeScript define un modificador de acceso público por defecto para los miembros de clase.

También es posible marcar un miembro como público usando la palabra reservada public

export{}

enum PhotoOrientation {

  Landscape,
  Portrait,
  Square,
  Panorama
}

class Picture {
  public id:number;
  public title:string;
  public orientation:PhotoOrientation;

  public constructor(id:number,title:string,orientation:PhotoOrientation){

    this.id = id;
    this.title = title;
    this.orientation = orientation;

  }

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

}

//Accediendo a los miembros publicos
    //Como tenemos acceso a los objetos de nuestra clase podremos acceder a sus atributos y cambiarlos Bv
      //Por defecto typescript considera un modificador de acceso public por defecto para cada uno
        //De los miembros
          //Aunque tambien podremos utilizar la palabra public para indicarlo pero implicitamento lo trae
  picture.id = 100; //public
  picture.title = 'Otro titulo'; //public
  album.title = 'Personal Activities';
  console.log(album);

Clases Miembros Privados

Typescript define una manera propia de declarar o marcar un miembro como privado usando la palabra reservada private

export{}

enum PhotoOrientation {

  Landscape,
  Portrait,
  Square,
  Panorama
}

class Picture {
  private id:number;
  private title:string;
  private orientation:PhotoOrientation;

  //El constructor es una excepcion el no ponerlo en private ya que no podriamos crear objetos a partir
    //De el y seria inutil nuestra clase
  constructor(id:number,title:string,orientation:PhotoOrientation){

    this.id = id;
    this.title = title;
    this.orientation = orientation;

  }

  //Para las funciones tambien pondremos el acceso publico
  public toString(){
    return `[id ${this.id},
            title: ${this.title},
            orientation: ${this.orientation}]`;
  }

}

class Album{

  private id:number;
  private title:string;
  private pictures: Picture[];

  public constructor(id:number, title:string){

    this.id = id;
    this.title = title;
    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)
  album.addPicture(picture);

  console.log(album);

  //Al momento de que queramos acceder a estas propiedades para imprimirlas o cambiarlas
    //No podremos hacerlo ya que estas propiedas serian privadas
  picture.id = 100; //public
  picture.title = 'Otro titulo'; //public
  album.title = 'Personal Activities';
  console.log(album);

Miembros Privados Ecmascript

Typescript también soporta (a partir de la versión 3.8) la nueva sintaxis Javascript para miembros privados. #atributo

Esta característica puede ofrecer mejores garantías de aislamiento en miembros privados.

Hacer el uso de # lo podremos hacer en ves de la palabra reservada private porque hace una mejor función y al momento de aplicarla se utilizaría en todos lados ese atributo que es definido en el contexto de la clase, esta sintaxis una mejor encapsulación y no nos permite conocer ningún estado interno.

Cristofher Jumbo Jimenez

student•

Ya decia yo que para tener private era mejor usar readonly hahahha, que bueno. Pero no esta soportado el sharp en todos los browsers?

Massimo Di Berardino

student•

Hola @aybike, no está soportado en todos los browsers, pero lo puedes solucionar con un linter transpilando el código previamente :)

Moisés Manuel Morín Hevia

student•

El usar # es para encapsular nivel no puedes ni leer lo que esta en ese miembro. Los navegadores actuales si lo soportan pero los no actualizados no, osea si lanzas tu proyecto & alguien en la sierra lo abre tendrá problemas.

export {}

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama,
};

class Picture {
    // properties
    #id: number;
    #title: string;
    #orientation: PhotoOrientation;
    //constructor
    public constructor( id: number, title: string, orientation: PhotoOrientation ) {
        this.#id = id;
        this.#title = title;
        this.#orientation = orientation;
    }
    //Performance
    private toString() {
        return `[id: ${this.#id}, title: ${this.#title}, orientation: ${this.#orientation}]`
    }
}

class Album {
    #id: string;
    #title: string;
    #pictures: Picture[];

    public constructor( id: string, title: string ) {
        this.#id = id;
        this.#title = title;
        this.#pictures = [];
    }    

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

let album: Album = new Album('stories-1', 'Photos of mine');
/** Don't care about commented code below. The classes has private members, the output will be empty  */
// 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);
// album.addPicture(newPic); there's an error due to private class props
// album.addPicture(new2Pic); there's an error due to private class props
// album.addPicture(new3Pic);  there's an error due to private class props
console.log('album -> ', album);

export {};

// TypeScript 3.8

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}

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

    public constructor(id: number, 
                title: string, 
                orientation: PhotoOrientation) {
        this.#id = id;
        this.#title = title;
        this.#orientation = orientation;
    }

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

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

    public constructor(id: number, title: string) {
        this.#id = id;
        this.#title = title;
        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
// picture.id = 100; // private
// picture.title = 'Another title'; // private
// album.title = 'Personal Activities'; //private
console.log('album', album);

const album: Album = new Album(1, 'Personal Pictures')
const picture: Picture = new Picture(1, 'Selfie', PhotoOrientation.Square)
const picture2: Picture = new Picture(2, 'Selfie2', PhotoOrientation.Landscape)
const picture3: Picture = new Picture(3, 'Selfie3', PhotoOrientation.Portrait)
album.addPicture(picture)
album.addPicture(picture2)
album.addPicture(picture3)

console.log(album) //* Imprime el objeto
console.table({album}) //* Como manejamos un objeto, podemos usar console.table
album.showPictures()

export{}

enum PhotoOrientation {

  Landscape,
  Portrait,
  Square,
  Panorama
}

class Picture {
  public id:number;
  public title:string;
  public orientation:PhotoOrientation;

  public constructor(id:number,title:string,orientation:PhotoOrientation){

    this.id = id;
    this.title = title;
    this.orientation = orientation;

  }

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

}

//Accediendo a los miembros publicos
    //Como tenemos acceso a los objetos de nuestra clase podremos acceder a sus atributos y cambiarlos Bv
      //Por defecto typescript considera un modificador de acceso public por defecto para cada uno
        //De los miembros
          //Aunque tambien podremos utilizar la palabra public para indicarlo pero implicitamento lo trae
  picture.id = 100; //public
  picture.title = 'Otro titulo'; //public
  album.title = 'Personal Activities';
  console.log(album);

export{}

enum PhotoOrientation {

  Landscape,
  Portrait,
  Square,
  Panorama
}

class Picture {
  private id:number;
  private title:string;
  private orientation:PhotoOrientation;

  //El constructor es una excepcion el no ponerlo en private ya que no podriamos crear objetos a partir
    //De el y seria inutil nuestra clase
  constructor(id:number,title:string,orientation:PhotoOrientation){

    this.id = id;
    this.title = title;
    this.orientation = orientation;

  }

  //Para las funciones tambien pondremos el acceso publico
  public toString(){
    return `[id ${this.id},
            title: ${this.title},
            orientation: ${this.orientation}]`;
  }

}

class Album{

  private id:number;
  private title:string;
  private pictures: Picture[];

  public constructor(id:number, title:string){

    this.id = id;
    this.title = title;
    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)
  album.addPicture(picture);

  console.log(album);

  //Al momento de que queramos acceder a estas propiedades para imprimirlas o cambiarlas
    //No podremos hacerlo ya que estas propiedas serian privadas
  picture.id = 100; //public
  picture.title = 'Otro titulo'; //public
  album.title = 'Personal Activities';
  console.log(album);

Clases públicas y privadas

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