javascript - attribute - summary html

¿Cómo puedo usar decoradores hoy?

Question

Veo que los decoradores están siendo utilizados hoy en día en algunos códigos javascript. Mi pregunta es realmente doble.

Primero:

Si los decoradores ni siquiera se han finalizado, ¿cómo es posible usarlos en el código de producción, hoy? ¿No será inexistente el soporte del navegador?

Segundo:

Dado que es posible usarlo hoy, como sugerirían algunos proyectos de código abierto, ¿cuál es una configuración típicamente recomendada para que los decoradores trabajen?

Answer 1

Hay algunas soluciones para usar decoradores:

• babeljs.io - y está junto al compilador es5 con el apoyo de decoradores.
• Traceur - otro es al lado del compilador de es5 por google.
• typescript - un superconjunto mecanografiado de javascript que admite decoradores.

Hay alguna diferencia en la forma en que estas herramientas transfieren un javascript "moderno" a uno más antiguo para que pueda explorarlo si es necesario, ya que tienen áreas de juego en línea.

Answer 2

Tienes razón, los decoradores de ES2016 aún no forman parte de la especificación. Pero eso no significa que no podamos usarlo hoy.

Primero demos un paso atrás y repasemos "qué es un decorador". Los decoradores son simplemente envoltorios que agregan comportamiento a un objeto. No es un concepto nuevo en javascript (o programación en general), en realidad ha existido por un tiempo ...

Aquí hay un ejemplo básico de un decorador que verifica los permisos:

function AuthorizationDecorator(protectedFunction) {
    return function() {
        if (user.isTrusted()) {
            protectedFunction();
        } else {
            console.log(''Hey! No cheating!'');
        }
    }
}

Usándolo se vería así:

AuthorizationDecorator(save);

Usted ve que todo lo que estamos haciendo es simplemente envolver alguna otra función. Incluso puede pasar una función a través de varios decoradores, cada uno agregando una parte de la funcionalidad o ejecutando algún código.

Incluso puedes encontrar algunos artículos antiguos que explican el patrón de decorador en javascript.

Ahora que entendemos que los decoradores son en realidad algo que (la comunidad de JavaScript) siempre pudimos hacer, probablemente no nos sorprenda que realmente cuando utilizamos los decoradores de ES2016 hoy en día, simplemente se estén compilando en el código ES5, por lo tanto, se mantiene la compatibilidad del navegador. Así que por el momento es simplemente azúcar sintáctica (un poco de azúcar realmente dulce que podría agregar).

En cuanto a qué compilador utilizar para convertir su código ES2016 en código ES5, tiene algunas opciones: babeljs.io y Traceur son las más populares.

Aquí hay más información sobre Exploradores de decoradores ES2016 .

Answer 3

@Class soporte de @Class decorators se puede habilitar en Babel / Traceur

Babel:

$ babel --optional es7.decorators

Fuente: Exporing ES7 Decorators - Medium

Traceur

traceurOptions: {
  "annotations": true
}

@Property decoradores de @Property

... y dado que cada @Property proporciona una funcionalidad única, cada una requiere un enfoque diferente para la eliminación de la grasa en ES6 / 7.

Así es como usas @Inject :

Mecanografiado

exports class ExampleComponent {
  constructor(@Inject(Http) http: Http) {
    this.http = http;
  }
}

ES 6/7

exports class ExampleComponent {
  constructor(http) {
    this.http = http;
  }

  static get parameters() {
    return [[Http]];
  }
}

Fuente: https://.com/a/34546344/290340

Actualizar:

Parece que Babel cambió la forma en que los decoradores están configurados y el artículo está desactualizado. Aquí hay un enlace al nuevo enfoque.

En breve; sí , puedes usar los decoradores @Class en ES6 / 7; ningún decorador de propiedades no es compatible con ES6 / 7, por lo que tendrá que usar soluciones alternativas.