Getters

Clase 7 de 25 • Curso de TypeScript: Programación Orientada a Objetos y Asincronismo

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes. :D

Get

Con get podemos acceder a una propiedad con un alcance privado, podemos obtener los datos de esa propiedad pero no modificarlos o mutarlos.

Lo podemos acceder como si fuese una propiedad más de la instancia.

Por definición, todos los getters tienen que retornar algo.

Sintaxis

class ClassName {
		constructor () {
				statements
		}

		get methodName () {
				statements
				return something;
		}
}

Una aclaración

En lo particular, prefiero utilizar el private class fields (#) para poder declarar propiedades privadas, ya que es nativo de JavaScript y además que realmente hace un encapsulamiento de las propiedades al momento de llevar el código a producción. Cabe agregar que con este nos podemos evitar realizar el uso de underscore (_) y también tener problemas con los nombres de los métodos getters y setters.

La estructura del código depende del proyecto y del equipo, pero esa es forma preferida de emplear lo mejor de ambos mundos, tanto de JavaScript como de TypeScript.

Código de la clase

Código adaptado por mí.

 type PartOfTheCalendar = 'day' | 'month'| 'year';

export class MyDate {
    #day: number;

    constructor (
        public year: number = 1993,
        public month: number = 7,
        day: number = 1
    ) {
        this.#day = day;
    }

    printFormat (): string {
        const { year } = this;
        const day = this.#addPadding(this.#day);
        const month = this.#addPadding(this.month);
        return `${day}/${month}/${year}`;
    }

    add (amount: number, type: PartOfTheCalendar): void {
        if (type === 'day') this.#day += amount;
        if (type === 'month') this.month += amount;
        if (type === 'year') this. year += amount;
    }

    #addPadding (value: number): string {
        if (value < 10) return `0${value}`;
        return `${value}`;
    }

    get day (): number {
        // Code
        return this.#day;
    }

    get isLeapYear (): boolean {
        const { year } = this;
        if (year % 4 === 0) return false;
        if (year % 100 === 0) return true;
        return year % 4 === 0;
    }

    // get myReturn () {

    // } // Error:
}

const myDate = new MyDate(2020);
const myDate2 = new MyDate(2000);
const myDate3 = new MyDate(2001);
const myDate4 = new MyDate(2004);

myDate.day;
console.log('My Date:',myDate.day, myDate.isLeapYear);
console.log('My Date 2:',myDate2.day, myDate2.isLeapYear);
console.log('My Date 3:',myDate3.day, myDate3.isLeapYear);
console.log('My Date 4:',myDate4.day, myDate4.isLeapYear);

Ramon Pocón

student•

muy buen resumen!

Jorge Aguilar

student•

Cool, pero nunca uses '#' como nombre de una variable. A pesar que es válido, puede confundir, recuerda que es también usado para acceder a propiedades id en CSS, o comentarios en python!.

Michael Forero Chaux

student•

jajaja Pensé que era el único que buscaba en internet algunos algoritmos ya hechos. Lo importante es saber para qué usarlo en nuestras soluciones. (min 7:22). Like si has hecho lo mismo.

Andrés Felipe Eslava Zuluaga

student•

Getters: Forma de acceder a variables privadas

// un getter internamente es una función, pero fuera de clase es un propiedad: no se ejecuta.
||||||||||||||||||||||||||||||||||||||
A 'get' accessor must return a value.
||||||||||||||||||||||||||||||||||||||

Nelson Alayón

student•

aca cree un get personal, que define el mes con nombre en vez de con numero

  get exampleVarGet() {
        const months = ['january', 'february', 'march', 'april', 'may', 'june', 'jule', 'august', 'september', 'october', 'november', 'december']        
        return months[this.month]
    }

para que pueda llamarse como una variable de la clase

console.log(year1.exampleVarGet)

Cesar More Sanchez

student•

Acá el mismo método pero usando operador ternario:

get isLeapYear(): boolean {
    return (
      (this.year % 400 === 0 || this.year % 100 !== 0) && this.year % 4 == 0
    );
  }

Miguel Angel Reyes Moreno

student•

Getters

Los getters NO pueden ser void.

export class MyDate {
  constructor(
    private _year: number = 1998,
    private _month: number = 1,
    private _day: number = 1
  ) {}

  get day(): number {
    return this._day;
  }

  get isLeapYear(): boolean {
    if (this._year % 400 === 0) return true
    if (this._year % 100 === 0) return false

    return this._year % 4 === 0;
  }
}

const myDate = new MyDate(2024, 1, 1);
console.log(myDate.day)
console.log(myDate.isLeapYear) //* parece una propiedad pero es un método

Luis Gerardo Rosas Ruiz

student•

Mirando un poco la documentación de Typescript veo que ellos utilizan underscore () para identificar variables privadas, pero en javascript utilizan signo de numeral (#), mi pregunta es a la hora de compilación que es mejor utilizar underscore () o signo de numeral #?

Reinhard Tristan Ortiz

student•

Utilizar el underscore ( _ ) es una convención para identificar variables privadas.
Ponerle el hash (#) al inicio a una propiedad o metodo en JS es una nueva caracteristica de ES2022 para volver ese campo privado.

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Classes/Private_class_fields

Yohesky Pimentel

student•

los getters pueden recibir parametros?

José Eras

student•

No se puede

JOSÉ ERNESTO BETANCOURT ACEVEDO

student•

El minuto 7:15 nos define a la gran mayoría => buscar en internet cirtas soluciones jajajajajaja. Eres un grande, Nico

Jhonly Baez

student•

A las variables que están globales o las que están definidas en el constructor se le llaman: Atributos y el estándar o convención es tenerla con un _. Sin embargo, cuando encapsulamos ese mismo atributo se le llama Propiedad. Solo quería aportar eso por si se confunden no es lo mismo, mayormente los atributos son privados para realizar "x" cosa en los métodos.

alexzambrano310

student•

para mas info consulta encapsulamiento. getter y setter. la teoria es necesaria para apropiar mejor el tema

Ivan Sangueza Alarcon

student•

Aquí el algoritmo

get isLeapYear(): boolean{
    if(this.year % 400 === 0) return true;
    if(this.year % 100 === 0) return false;
    return this.year % 4 === 0;
 }

Alvaro Olarte

student•

const myDate2 = new MyDate(2020, 7, 10);
console.log(`La fecha ${myDate2.printFormat()} ${myDate2.isLeapYear ? 'es' : 'no es'} un año bisiesto`);

Alvaro Olarte

student•

//Code Leap Year
get isLeapYear(): boolean{
        if((this.year % 4 === 0 && this.year % 100 !== 0) || (this.year % 400 === 0)){
            return true;
        }
        return false;
    }

Daniel Meza

student•

Al usar getters. ¿Se pierde la referencia de la variable?. Me pasó en cierta ocasión que transformé la info que obtuve con un get y lo guardé en una nueva variable. Pero la variable que se accedió a ella por el getter se modificó también...

Eminson Mendoza

student•

Los getters y setters son métodos en programación orientada a objetos que permiten acceder y modificar los atributos de una clase de manera controlada. Esto promueve el encapsulamiento.

Ejemplo de getter y setter en TypeScript:

class Persona {
    private _nombre: string;

    constructor(nombre: string) {
        this._nombre = nombre;
    }

    // Getter
    get nombre(): string {
        return this._nombre;
    }

    // Setter
    set nombre(nuevoNombre: string) {
        this._nombre = nuevoNombre;
    }
}

const persona = new Persona("Juan");
console.log(persona.nombre); // "Juan"
persona.nombre = "Pedro";
console.log(persona.nombre); // "Pedro"

Este enfoque garantiza que se puedan aplicar validaciones al modificar atributos.

Luis Herrera

student•

Los getters pueden incluir lógica personalizada para procesar o transformar los datos antes de devolverlos. Esto es útil cuando necesitas realizar validaciones, formateos, o cualquier otra operación antes de proporcionar el valor.

class Rectangle {
  private _width: number;
  private _height: number;

  constructor(width: number, height: number) {
    this._width = width;
    this._height = height;
  }

  get area(): number {
    return this._width * this._height;
  }

  get perimeter(): number {
    return 2 * (this._width + this._height);
  }
}

const rectangle = new Rectangle(5, 10);
console.log(rectangle.area); // Output: 50
console.log(rectangle.perimeter); // Output: 30

```class Rectangle {

&#x20; private \_width: number;

&#x20; private \_height: number;



&#x20; constructor(width: number, height: number) {

&#x20;   this.\_width = width;

&#x20;   this.\_height = height;

&#x20; }



&#x20; get area(): number {

&#x20;   return this.\_width \* this.\_height;

&#x20; }



&#x20; get perimeter(): number {

&#x20;   return 2 \* (this.\_width + this.\_height);

&#x20; }

}



const rectangle = new Rectangle(5, 10);

console.log(rectangle.area); // Output: 50

console.log(rectangle.perimeter); // Output: 30

Nazareno Rosales

student•

Nota: un Getter no puede recibir un valor por parámetro y debe retornar algo obligatoriamente.

Ronaldo Delgado

student•

me gusta como se manejan los geters ya que podemos asociar código a una variable que queramos retornar

Alejandro Chavez

student•

Los getters no pueden recibir parametros :thinking: :thinking: :thinking: