Os subestimados
Decorators e seus

poderes nas

aplicações Angular

Os subestimados
Decorators e seus

poderes nas

aplicações Angular

Eduardo Florence

@eduardoflorence

eduardo@infolink.com.br

github.com/eduardoflorence

Desenvolvedor Full Stack

slides.com/eduardoflorence

Meu primeiro contato

com um Decorator

Histórico do Decorator

Javascript TC39 - stage 2

 

Typescript experimental

// tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "resolveJsonModule": true
  }
}

Vale a pena usar ?

O que faz e como se aplica?

É um tipo especial de declaração que pode ser "anexado" a uma declaração de classe, método, propriedade ou parâmetro

Objetivo

  • Aumento de Produtividade
  • Legibilidade de código (clean)
  • DRY
  • Auxilia na aplicação da Arquitetura do seu projeto

Como

  • Ampliam as funcionalidades
  • Alteram comportamento
  • Adicionam metadados
  • Observam métodos e propriedades

Pontos importantes

  • Os decorators são sempre chamados quando uma classe é declarada e não quando um objeto é instanciado.
  • Não é permitida a utilização de decorators em construtores.
  • Os decorators podem ser do tipo: ClassDecorator, PropertyDecorator, MethodDecorator ou ParameterDecorator

Formato (@expression)

@decorator1
@decorator2
class CadastroComponent {
  
  @decorator3
  nome: string

  @decorator4
  validar(@decorator5 text: string): boolean {
    ...
  }
  
}

Como criar decorators?

Eduardo Florence

@eduardoflorence

eduardo@infolink.com.br

github.com/eduardoflorence

Desenvolvedor Full Stack

slides.com/eduardoflorence

Made with Slides.com