Un tutorial sobre cómo crear decoradores de JavaScript y cómo el uso de accesos automáticos ayuda a mejorar su experiencia de desarrollador.

Tabla de contenido

• Contexto y especificación
• Prefacio
• Accesorios automáticos
• Creando decoradores
  • Un decorador sencillo
  • Validación con decoradores
  • Opciones de decorador
• Metadatos

Contexto y especificación

La propuesta de decoradores en GitHub ya hace un gran trabajo al desglosar los casos de uso básicos de los decoradores. Mi objetivo no es recrear esos ejemplos allí, sino resaltar algunas características e interacciones menos conocidas. Además, en el próximo artículo de esta serie destacaré cómo componer o encadenar varios decoradores en una sola propiedad de clase.

Prefacio

Cada muestra de código vendrá con un enlace a un área de juegos interactiva de Babel REPL, para que pueda probarlo usted mismo sin necesidad de configurar un polyfill o activar un repositorio. La opción "Evaluar" en la parte superior izquierda (en Configuración) debe estar marcada en todos mis ejemplos, lo que significa que podrá ver el código, editarlo, abrir la consola de desarrollo de su navegador y ver los registros/resultados allí.

No es necesario que prestes atención al código transpilado en el lado derecho de Babel REPL, a menos que quieras profundizar en el polyfill para decoradores. El lado izquierdo de Babel REPL es donde puedes editar y escribir código para probarlo tú mismo.

Para enfatizar, la consola de herramientas de desarrollador debe mostrar registros de la consola. Si no es así, asegúrese de que Evaluar esté marcado en la parte superior izquierda.

Accesorios automáticos

Una característica importante de la especificación Decorators son los accesorios automáticos. Comenzaremos aprendiendo qué son y cómo el uso del acceso automático facilitará la escritura de decoradores.

La propuesta de los decoradores describe el acceso automático aquí. Pero en última instancia es una característica simple; veamos un ejemplo de trabajo básico: Babel REPL.

class MyClass {
  accessor myBoolean = false
}

En esta definición de clase, la palabra clave de acceso va antes del nombre de la propiedad. Sin embargo, esto realmente no ha cambiado nada en la propiedad todavía; a continuación, veremos qué tan útiles son los accesorios automáticos cuando se combinan con decoradores.

(Tenga en cuenta que también puede usar estático con accesos automáticos, como el accesor estático myBoolean = false)

Creando decoradores

Para comprender mejor por qué utilizamos un acceso automático, creemos algunos decoradores.

Un decorador sencillo

Comenzaremos combinando accesores automáticos con un decorador que en realidad no hace mucho, para tener una idea de la sintaxis.

Aquí hay un decorador funcional que mantiene una variable interna y le permite obtener y configurar esa variable a través de la propiedad de la clase: Babel REPL

function simpleDecorator(value, context) {
  let internalValue = false
  return {
    get() {
      return internalValue
    },
    set(val) {
      internalValue = val
      return internalValue
    }
  }
}

class MyClass {
  @simpleDecorator
  accessor myBoolean
}

Este decorador devuelve un objeto con dos métodos: get() y set(). Así es como un decorador para un descriptor de acceso automático puede "decorar" o envolver tanto el definidor como el captador de una propiedad en un solo lugar; No tenemos que crear un simpleGetterDecorator y un simpleSetterDecorator. En lugar de eso, los hemos combinado en una única definición con accesos automáticos, lo cual es más fácil.

Al final, esto parece una función bastante normal hasta el momento, ¡lo cual es excelente para una introducción!

Validación con decoradores

Para prepararnos para el resto del artículo, actualicemos nuestro decorador para que realmente realice algún tipo de validación. Haremos un decorador que sólo te permitirá establecer números pares y nada más. Así es como se vería: Babel REPL

function onlyEvenNumbers(value, context) {
  let internalNumber = 0
  return {
    get() {
      return internalNumber
    },
    set(val) {
      const num = Number(val)
      if(isNaN(num)) {
        // don't set the value if it's not a number or coerced to a number
        return internalNumber
      }
      if(num % 2 !== 0) {
        // don't allow odd numbers
        return internalNumber
      }
      internalNumber = val
      return internalNumber
    }
  }
}

class MyClass {
  @onlyEvenNumbers
  accessor myEvenNumber
}

Entonces agregamos lógica al método set() y ahora cualquiera que intente establecer la propiedad myEvenNumber en nuestra clase pasará por esa lógica de validación. Lindo.

Opciones de decorador

Ahora que tenemos un bonito decorador solo pares, ¡hagamos que maneje números pares e impares con una opción para configurar qué tipo de número queremos!

Afortunadamente, debido a que lo que estamos escribiendo aquí es un JavaScript de apariencia bastante normal, no es demasiado difícil configurarlo para que funcione de esta manera. Envolvemos el decorador original con una función que acepta una opción y luego devolvemos el decorador. Babel REPL

function evensOrOdds(onlyEvens = true) {
  return function decorator(value, context) {
    let internalNumber = 0
    return {
      get() {
        return internalNumber
      },
      set(val) {
        const num = Number(val)
        if(isNaN(num)) {
            // don't set the value if it's not a number
            return internalNumber
        }
        if(num % 2 !== (onlyEvens ? 0 : 1)) {
            return internalNumber
        }
        internalNumber = val
        return internalNumber
      }
    }
  }
}

class MyClass {
  @evensOrOdds(true)
  accessor myEvenNumber

  @evensOrOdds(false)
  accessor myOddNumber
}

Ahora hemos configurado nuestro decorador para aceptar opciones arbitrarias, lo que permite a los usuarios de nuestro decorador personalizar su comportamiento. Hurra.

Metadatos

Una herramienta adicional que sus decoradores pueden utilizar es context.metadata. Este objeto se pasa a cada decorador y puedes usarlo para una variedad de cosas, pero debes tener cuidado porque el objeto de metadatos es el mismo para todas las invocaciones de cada decorador.

Continuar aprendiendo

¡Continúa con la siguiente publicación de la serie para aprender cómo componer (o aplicar varios) decoradores en una sola propiedad!