Métodos Get y Set

Aurelio ML

student•

Un poquito de información extra:

TypeScript soporta getters/setters como una forma de interceptar accesos a un miembro de un objeto. Esto le da una forma de tener un control más fino sobre cómo se accede a un miembro en cada objeto.

Convirtamos una clase simple para usar get y set. Primero, empecemos con un ejemplo sin getters y setters.

class Employee {
  fullName: string;
}

let employee = new Employee();
employee.fullName = "Bob Smith";

if (employee.fullName) {
  console.log(employee.fullName);
}

Aunque permitir que la gente establezca directamente el nombre completo al azar es bastante útil, también podemos querer imponer algunas restricciones cuando se establece el nombre completo.

En esta versión, añadimos un configurador que comprueba la longitud del nuevo Nombre para asegurarse de que es compatible con la longitud máxima de nuestro campo de base de datos de respaldo. Si no lo es, arrojamos un error notificando al código del cliente que algo salió mal.

Para preservar la funcionalidad existente, también añadimos un simple programa que recupera el nombre completo sin modificar.

const fullNameMaxLength = 10;

class Employee {
  private _fullName: string;

  get fullName(): string {
    return this._fullName;
  }

  set fullName(newName: string) {
    if (newName && newName.length > fullNameMaxLength) {
      throw new Error("fullName has a max length of " + fullNameMaxLength);
    }

    this._fullName = newName;
  }
}

let employee = new Employee();
employee.fullName = "Bob Smith";

if (employee.fullName) {
  console.log(employee.fullName);
}

Para probarnos a nosotros mismos que nuestro accesorio está comprobando ahora la longitud de los valores, podemos intentar asignar un nombre de más de 10 caracteres y verificar que obtenemos un error.

Un par de cosas a tener en cuenta sobre los accesorios:

Primero, los accessores requieren que el compilador dé como resultado ECMAScript 5 o superior. La bajada de nivel a ECMAScript 3 no está soportada. Segundo, los accesorios con un get y sin set se infieren automáticamente para ser de solo lectura. Esto es útil cuando se genera un archivo.d.ts a partir de su código, porque los usuarios de su propiedad pueden ver que no pueden cambiarlo.

Raul Hernández

student•

Muy útil de verdad la explicación, en el curso de js profesional también lo explicaron pero con tu ejemplo ya me ha quedado clarísimo su uso. Gracias!

Juan David González Rodríguez

student•

ósea básicamente con los get y set , no podemos modificar su estado o su valor definitivamente?

Victoria Ramirez Charles

student•

_(underscore) Es una simple convención que indica una variable privada.

   private _id: number;
   private _title: string;
   private _orientation: PhotoOrientation;

Cristian Blandón

student•

Es bueno tener en cuenta que la mayoría de equipos que no trabajan con TypeScript, usan esta convención.
La mayoría de equipos que sí trabajan con TypeScript, no la usan, porque el indicador de acceso (private) es suficiente.

Moisés Manuel Morín Hevia

student•

Okey, lo tendré en cuenta. Yo cambie el nombre del get & set porque pensé que _ era mucho.

Carlos Rodríguez

student•

Es mejor llamar a los métodos con el prefijo getId y setId:

export {};

enum PhotoOrientation {
    Landscape,
    Portrait,
    Square,
    Panorama
}

// get y set

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

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

    get getId() {
        return this.id;
    }
    set setId(id: number) {
        this.id = id;
    }
    get getTitle() {
        return this.title;
    }
    set setTitle(title: string) {
        this.title = title;
    }
    get getOrientation() {
        return this.orientation;
    }
    set setOrientation(o: PhotoOrientation) {
        this.orientation = o;
    }

    // Comportamiento
    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 = [];
    }

    get getId() {
        return this.id;
    }
    set setId(id: number) {
        this.id = id;
    }
    get getTitle() {
        return this.title;
    }
    set setTitle(t: string) {
        this.title = t;
    }

    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.getId); // get id()
picture.setId = 100; // private, set id(100);
picture.setTitle = 'Another title'; // private
album.setTitle = 'Personal Activities'; //private
console.log('album', album);

Luis Angel

student•

Es mas sencillo así para algunos que conocemos un poco de Java, ya que esa es la convención que se utiliza para nombrar métodos getters y setters además que dichos nombres son más significativos que simplemente nombrarlos igual que los atributos de la clase a la que hacen referencia.

Luis Abdel Rangel Castro

student•

export {};
console.clear();

enum PhotoOrientation {
  Landscape = 'Landscape',
  Portrait = 'Portrait',
  Square = 'Square',
  Panorama = 'Panorama',
}

// get y set
class Picture {
  private _id: number;
  private _title: string;
  private _orientation: PhotoOrientation;

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

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

  get title(): string {
    return this._title;
  }
  set title(title: string) {
    this._title = title;
  }

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

  // Comportamiento
  public 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 = [];
  }

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

  get title(): string {
    return this.#title;
  }
  set title(title: string) {
    this.#title = title;
  }

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

const picture: Picture = new Picture(100, 'cool', PhotoOrientation.Square);
const picture1 = new Picture(201, 'korn', PhotoOrientation.Square);
const album: Album = new Album(534, 'Family');
console.log(picture);
console.log(picture1);
album.addPicture(picture);
album.addPicture(picture1);

console.log('album', album);

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

picture.title = 'New title';

Moisés Manuel Morín Hevia

student•

Modificadores de acceso. Get(accesa) y Set(muta), Interceptar y controlar el acceso a los miembros privados del objeto. Son métodos de la clase para leer y cambiar los valores de los miembros privados. De que forma podemos acceder & mutar el valor en los miembros. Validación de los nuevos valores en los miembros.

Edwin Alberto Equihua Ochoa

student•

ya, en caso que les pase que les de error por el EcmaScript, en su terminal escriban: tsc --target es6 src/clases-get-set.ts. ya con esto se les solucionara el problema.

Moisés Manuel Morín Hevia

student•

Thanks, lo tendré en cuenta.

Irving Juárez

student•

¿Por qué se coloca un guion bajo a las variables privadas?

Eso es una forma de decirle a los programadores que una variable no se debe modificar. Es solo una convención, por lo que incluso podemos cambiar esa variable si así lo deseamos, no hay problema por parte del lenguaje, pero es una convención que el programador le hace a otros programadores que pueda que trabajen en el proyecto a futuro

Jimmy Buriticá Londoño

student•

Lo había visto y no tenía claro el porque usaban un guion bajo.

Andres Felipe Pinchao Ramirez

student•

METODOS GET Y SET

TypeScript soporta los métodos accesores set y get como una forma de interceptar los accesos a los miembros privados de un objeto.

export{}

enum PhotoOrientation {

  Landscape,
  Portrait,
  Square,
  Panorama
}

//Los moficadores de acceso get y set son metodos que nos permiten controlar
  //El acceso a cada uno de los miembros

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

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

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

  }
  //El nombre de una funcion accesora no debe coincidir con el nombre de un miembro
    //Podremos arreglar esto cambiando el nombre del miembro o el de la funcion
  get idH(){
    return this.#id;
  }
  set idH(id){

    this.#id = id;
  }

  get titleT(){

    return this.#title

  }
  set titleT(title:string){

    this.#title = title;

  }

  get orientationO(){

    return this.#orientation;
  }

  set orientationO(o:PhotoOrientation){

    this.#orientation = o;
  }

  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)
  album.addPicture(picture);

  console.log(album);

//Cada vez que efectuamos un cambio accesando a los atributos de mi objeto heredado
  //Estamos aplicando por debajo los metodos get cuando solo solicitamos el valor
    //Y set cuando cambiamos el valor de el atributo
  console.log(picture.id)//get id()
  picture.id = 100;  //private, set id(100)
  picture.title = 'Otro titulo'; 
  album.title = 'Personal Activities';
  console.log(album);

Edwin Alberto Equihua Ochoa

student•

instale la extencion que dijo el profesor, pero aun me marca error en los datos privados #, porque sera¿?

David Prieto Cornejo

student•

Fijate en el tsconfig.json el atributo target que sea es6 o mayor!

{
   "compilerOptions": {
      "target": "es6"
   }
}

Moisés Manuel Morín Hevia

student•

Es por la configuración el arvhico json principal, debe estar a la versión actual (es6)

Jose Daniel Hernandez Quiceno

student•

Entonces que logica tiene establecer estados como privados y añadiendo los getter y setter para luego modificarlos como si fueran publicos. Porque no simplemente dejarlos publicos?

Manuel Ojeda

student•

El uso de Gettters y Setters es utilizado muchisimo en Programación Orientada a Objetos, de manera que para acceder a la propiedad del objeto es a tráves de esas dos funciones.

Es completamente nromal pensar que es mejor dejar las propiedades públicas, pero no es siempre bueno dejar que sea visible para todos de manera que hay propiedades y funcioes que solo se usarán de manera interna en la Clase.

Esto que hace Luis es conocido como Encapsulamiento

Agustin Martinez

student•

Hola Jose, hablando con un amigo que usa hace mucho typescript me dijo que es algo como de usar cuando realizas alguna modificacion al valor que se envia al set antes de setearlo propiamente dicho.

Miguel Angel Reyes Moreno

student•

Creo que una mejor manera de apreciar que sí estamos usando los métodos GET y SET es escribir un nombre diferente al del atributo, a pesar de haber usado el guión bajo. Ejemplo:

get idPicture(){
    return this._id
  }
  set idPicture(id: number){
    this._id = id
  }
  get titlePicture(){
    return this._title
  }
  set titlePicture(title: string){
    this._title = title
  }
  get orientationPicture(){
    return this._orientation
  }
  set orientationPicture(orientation: PhotoOrientation){
    this._orientation = orientation
  }

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

Al momento de escribir el nombre del objeto, no vamos a acceder al atributo, sino al método:

//* Estamos usando los métodos get y set y, no los atributos directamente
picture.idPicture = 100
picture.titlePicture = 'Another title'
album.titleAlbum = 'Title for an album'
console.table({album})

Andrés Felipe Eslava Zuluaga

student•

Interceptar un acceso a cualqueir miembro de la clase si éste es privado: Getters & Setters. Le dan un toque de accesibilidad, si es que es necesario, para poder acceder -> modificar -> retornar algo que se desee saber.

export {}

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

class Picture {
    // properties
    private _id: number;
    private _title: string;
    private _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 {
    private _id: string;
    private _title: string;
    private _pictures: Picture[];

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

    get id() { return this._id }
    set id(id: string) {this._id = id}
    
    get title() { return this._title }
    set title(t: string) {this._title = t}
    
    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('stories-1', '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);
album.addPicture(newPic);
album.addPicture(new2Pic);
album.addPicture(new3Pic); 
console.log('album -> ', album);

Jose Daniel Barría Reyes

student•

Metodos set y get: soporta los métodos accesores set y get como una forma de interceptar los accesos a los miembros privados de un objeto

class Person {
	private _name:string
	constructor()
	get name(){
		return this._name
	}
	set name(name: string){
		this._name = name
	}
}

En nuestro objeto de clase person hariamos

person.name

Darwin Rodríguez

student•

Existirá alguna manera de que los getters y setters sean dinámicos? Algo así como, primero verificar si existe la propiedad y si existe aplicar el getter o el setter

Irving Juárez

student•

Pudieras hacer eso con un if statement...

Boris Vargas Paucara

student•

¿Alguna forma de generar getters and setters de manera automática?

Dennis David Arango Mandieta

student•

En NetBeans después de declarar las variables das click derecho, insertar y seleccionas la opción de getters and Setters y el automáticamente los genera.

Enrique Tecayehuatl

student•

Tienes que ser más descriptivo en lo que solicitas, empezando por el IDE, o editor, hay diferentes maneras de generar con snippets dependiendo de tu ambiente de desarrollo.

fidel agustin fuentes

student•

gente una pregunta, cual es la diferencia entre definir un clase con una propiedad privada a la cual le aplicamos un metodo get y set , a directamente definirla como publica?

Héctor Eduardo López Carballo

student•

Hola!

Esto simplemente es útil al momento de escribir código, si haces un atributo privado estás obligando a los desarrolladores a que usen forzosamente la lógica que definas para modificar un atributo y no puedan cambiarlos por cualquier valor que quieran.

En una función de get y set puedes poner validaciones que retornen un error cuando no se pasa el argumento adecuado, así facilitas el debugging y te proteges contra errores.

Oscar Gomez

student•

Eso es algo que pensé bastante también. Como dijo el profesor, es un interceptor, o sea que te permite parar a mitad de camino cualquier valor que le quieran mandar a la función y si le pones un condicional como if, lo puedes validar y si cumple se asignará, y si no, no. Interceptor es la palabra clave. Fue una super revelación cuando me dí cuenta.

Girlesa Quintero Rodríguez

student•

Me pueden ayudar porfa con un ejemplo concreto en el que pueda entender bien por qué es útil poner getters y setters en vez de dejarlo público? Aún es confuso.

Roger Carlos Ariel Alba

student•

Hola,

Aquí hay una discusión que te puede ayudar.

Girlesa Quintero Rodríguez

student•

@CarlosAlba Mil gracias!

Yolfry Bautista Reynoso

student•

private myclass: number | string public myclass2: number | string

Wilmer Caiza

student•

Saludos, si los objetos en TS se crean luego de consumir un servicio web, me resulta útil trabajar con get y set

Gerson Montenegro

student•

Tiene sentido crear un setter para un array de datos?

Manuel Ojeda

student•

Claro, se puede utilizar un setter para todas las propiedades de la clase sin importar su tipo de dato si es primitivo, arreglo, etc

Gerson Montenegro

student•

Gracias, @darkjeda, entiendo, pero su implementación sería tan simple como un

set(value: []) { this.#_pictures = value; }

Nunca me ha convenido del todo esta manera de hacerlo con este tipo de dato. Siento que algo falta.

Por qué fue la única variable a la que no agregó _set _y get si lo estaba haciendo con todas las demás entonces?