Um passo a passo sobre como criar decoradores JavaScript e como usar acessadores automáticos ajuda a melhorar sua experiência de desenvolvedor.

Índice

• Contexto e especificação
• Prefácio
• Acessadores automáticos
• Criando Decoradores
  • Um decorador simples
  • Validação com decoradores
  • Opções de decorador
• Metadados

Contexto e Especificação

A proposta dos decoradores no GitHub já faz um ótimo trabalho ao detalhar os casos de uso básicos dos decoradores. Meu objetivo não é recriar esses exemplos, mas sim destacar alguns recursos e interações menos conhecidas. Além disso, no próximo artigo desta série destacarei como compor ou encadear vários decoradores em uma única propriedade de classe.

Prefácio

Cada amostra de código virá com um link para um playground interativo do Babel REPL, para que você possa experimentá-lo sem precisar configurar um polyfill ou criar um repositório. A opção "Avaliar" no canto superior esquerdo (em Configurações) deve estar marcada em todos os meus exemplos, o que significa que você poderá ver o código, editá-lo, abrir o console de desenvolvimento do seu navegador e ver os logs/resultados lá.

Você não precisa prestar atenção ao código transpilado no lado direito do Babel REPL, a menos que queira se aprofundar no polyfill para decoradores. O lado esquerdo do Babel REPL é onde você pode editar e escrever código para testar você mesmo.

Para enfatizar, o console das ferramentas do desenvolvedor deve mostrar os logs do console. Caso contrário, certifique-se de que Avaliar esteja marcado no canto superior esquerdo.

Acessadores automáticos

Uma característica importante das especificações dos Decorators são os acessadores automáticos. Começaremos aprendendo o que eles são e como o uso do acessador automático tornará mais fácil escrever decoradores.

A proposta dos decoradores descreve o acesso automático aqui. Mas, em última análise, é um recurso simples; vejamos um exemplo básico de trabalho: Babel REPL.

class MyClass {
  accessor myBoolean = false
}

Nesta definição de classe, a palavra-chave do acessador vem antes do nome da propriedade. No entanto, isso ainda não mudou nada na propriedade - a seguir, veremos como os acessadores automáticos são úteis quando combinados com decoradores.

(Observe que você também pode usar static com acessadores automáticos, como acessador estático myBoolean = false)

Criando Decoradores

Para entender melhor por que estamos usando um acessador automático, vamos construir alguns decoradores.

Um decorador simples

Começaremos combinando acessadores automáticos com um decorador que na verdade não faz muito, para ter uma ideia da sintaxe.

Aqui está um decorador funcional que mantém uma variável interna e permite obter e definir essa variável por meio da propriedade na classe: 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 retorna um objeto com dois métodos: get() e set(). É assim que um decorador de um acessador automático pode "decorar" ou agrupar o setter e o getter de uma propriedade em um único lugar; não precisamos criar um simpleGetterDecorator e um simpleSetterDecorator. Em vez disso, nós os combinamos em uma única definição com acessores automáticos, o que é mais fácil.

No final, esta parece ser uma função bastante normal até agora - o que é ótimo para uma introdução!

Validação com decoradores

Para nos preparar para o restante do artigo, vamos atualizar nosso decorador para que ele realmente faça algum tipo de validação. Faremos um decorador que só permitirá definir números pares e nada mais. Seria assim: 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
}

Então adicionamos lógica ao método set() e agora qualquer um que tentar definir a propriedade myEvenNumber em nossa classe passará por essa lógica de validação. Legal.

Opções de decorador

Agora que temos um bom decorador apenas de pares, vamos fazê-lo lidar com números pares e ímpares com uma opção para configurar o tipo de número que queremos!

Felizmente, como este é um JavaScript de aparência bastante normal que estamos escrevendo aqui, não é muito difícil configurá-lo para funcionar dessa maneira. Envolvemos o decorador original com uma função que aceita uma opção e depois retornamos o 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
}

Agora configuramos nosso decorador para aceitar opções arbitrárias, o que permite que os usuários de nosso decorador personalizem seu comportamento. Yay.

Metadados

Uma ferramenta adicional que seus decoradores podem utilizar é context.metadata. Este objeto é passado para cada decorador e você pode usá-lo para diversas coisas, mas é preciso ter cuidado porque o objeto de metadados é o mesmo para todas as invocações de cada decorador.

Continuar aprendendo

Continue no próximo post da série para aprender como compor (ou aplicar vários) decoradores em um único imóvel!