🇺🇸 EN
Frontend
·2 min read·↗·🇺🇸 EN

Getter y Setter con TypeScript

Portada principal del artículo: Getter y Setter con TypeScript

El encapsulamiento es una parte esencial de la POO, y TypeScript soporta las palabras clave get y set para los miembros de una clase.

Podemos aplicar el encapsulamiento utilizando las palabras clave get y set antes del nombre de una función. De esta manera, encapsulamos lógica y usamos campos privados para manejar el estado.

En este artículo voy a mostrarte un ejemplo sencillo usando getter y setter para encapsular la lógica de campos públicos y mantener el estado protegido con un campo privado.

Tomemos como ejemplo la clase Student, la cual utiliza un campo privado para guardar la ubicación (location).

TypeScript 3.8 permite crear campos privados usando el prefijo # o con la palabra clave private.

class Student {
    #location: string;
    public name: string;
    constructor(name:string, location: string   ) {
        this.name = name;
        this.#location = location
    }
}

Queremos agregar un campo público para mostrar la ubicación del estudiante y una validación que no permita asignar "NY" como ubicación.

Los getters y setters nos ayudan en nuestro código permitiéndonos definir dos métodos usando las palabras clave get y set antes del nombre de la función.

La función location con la palabra clave get debe retornar el valor almacenado en el campo privado, en nuestro caso el campo this.#location.

La función location con la palabra clave set debe recibir un parámetro con el valor y guardarlo en el campo privado location. En nuestro caso, tomamos el parámetro value y verificamos si es igual a "NY". Si lo es, lanzamos un error; si no, lo asignamos al campo privado this.#location.

class Student {
    #location: string;
    public name: string;
   get location()  {
        return this.#location;
    }
    set location(value){
        if(value === "NY") {
            throw new Error(`${value} is invalid.`)
        } else {
        this.#location = value;
        }
    }
    constructor(name:string, location: string   ) {
        this.name = name;
        this.#location = location
    }
}

Si creamos un objeto con la ubicación "NY", se lanzará un error:

let demoUser = new Student('Dany', 'NY');
console.log(demoUser .location);
nodemon] starting `node estudiante.js`
C:\Users\dany\Desktop\curso\estudiante.js:27
            throw new Error(`${value} is invalid.`);
            ^
 
Error: NY is invalid.
    at Student.set location [as location] (C:\Users\dany\Desk
top\curso\estudiante.js:27:19)
 

Esta es una forma sencilla de tener una validación encapsulada al asignar un valor a un campo público.

Espero que esto te sea de ayuda para trabajar con getter y setter en TypeScript. Si te gustó este artículo, compártelo.

Foto por Keagan Henman en Unsplash

Parte de la serie Frontend

Modern frontend development — Angular, React, TypeScript, accessibility, and performance.

Ver serie completa

Artículos Relacionados

Compartir este artículo

Si esta guía te resultó útil, compártela con tu equipo o con otros desarrolladores.


Software real. Lecciones reales.

Comparto las lecciones que aprendí por las malas, para que puedas evitarlas o estar preparado cuando ocurran.

User avatar
User avatar
User avatar
User avatar
+13K

Únete a 13,800+ desarrolladores y lectores.

Cero spam. Cancela tu suscripción en cualquier momento.