la compatibilidad experimental con decoradores

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications You must be signed in to change notification settings

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error warning message: "Experimental support for decorators is a feature that is subject to change in a future release" #45071

rohan-paul commented Mar 5, 2018

mjbvz commented Mar 6, 2018

Sorry, something went wrong.

gondomar commented Mar 8, 2018

👍 14 reactions
🎉 1 reaction

rohan-paul commented Mar 8, 2018

manizm commented Apr 12, 2018 • edited Loading

No branches or pull requests

Decoradores en TypeScript

noviembre 14, 2018

Los decoradores ( decorators en inglés) son una propuesta para incluir en JavaScript que nos permite añadir anotaciones y metadatos o cambiar el comportamiento de clases, propiedades, métodos, parámetros y accesors. Con TypeScript podemos usarlos activando la propiedad experimentalDecorators del tsconfig.json de nuestro proyecto o si decidimos compilar mediante el comando tsc , colocar siempre la opción de --experimentalDecorators ---target ES5 .

Es muy importante saber que los decoradores al ser todavía una propuesta experimental es posible que tenga cambios en el futuro. No obstante, la presencia de estos en el desarrollo web actual está siendo notable , sobre todo en proyectos que utilizan TypeScript (Angular, Vue , Nest, Stencil, etc). A través de sencillos ejemplos, intentaré explicar de manera simple cómo funcionan y cómo crear sus propios decoradores.

¿Cómo funcionan?

Un decorador es una función que, dependiendo de que cosa queramos decorar , sus argumentos serán diferentes. Usan la forma @expression donde expression evaluará la función que será llamada. A continuación, explicaré los decoradores más frecuentes:

Decorador de clase

Es aplicado al constructor de la clase y puede ser usado para observar, modificar o reemplazar la definición inicial de la clase . Su único argumento es target que vendría siendo la clase decorada, tipado como Function o any :

En el ejemplo anterior, simplemente imprimimos por consola la clase que fue decorada. Si queremos hacer algo más avanzado, vamos a necesitar pasar parámetros a los decoradores . Para eso podemos escribir un decorator factory , que es simplemente una función que retorna otra función que será llamada en tiempo de ejecución por el decorador. En el código debajo, hacemos algo más interesante: Sobreescribimos una propiedad con el valor que pasamos como parámetro al decorador.

A pesar de inicializar nuestro objecto con el nombre John , el decorador sobrescribe la propiedad. Cabe destacar que los decoradores son llamados al momento de la declaración de la clase , no cuando se instancia un objeto.

Decorador de métodos

Tienen el mismo objetivo que las clases de observar, modificar o reemplazar. La función toma tres parámetros:

target : Metodo decorado, generalmente tipado como Object
propertyKey : Nombre del metodo, tipado como string | symbol
descriptor : Property Descriptor del objeto (value, writable, enumerable, configurable, más información acá )

Podemos crear un decorador para loguear caracteristicas, o también modificar y/o extender el comportamiento, en ese caso tendremos que modificar la propiedad value del descriptor , asignandole una función (y no una arrow function , ya que perderíamos el contexto de this ).

Consideren el siguiente ejemplo, donde el decorador log imprime por consola la clase del metodo, el nombre, property descriptor y también los argumentos cuando el metodo es llamado:

Decorador de propiedades y parámetros

Son más simples que los anteriores, un decorador de propiedades debe tomar como parámetros target , que es el prototipo de la clase, y propertyKey , el nombre de la propiedad. Finalmente los decoradores de parámetros, funcionan igual pero con el parámetro adicional parameterIndex , que indica la posición en el array, por ejemplo:

Gracias a herramientas como TypeScript podemos hacer uso de features que serán incluidas en el estándar en un futuro. Los decoradores, son simplemente funciones que nos permiten darle un significado especial a clases, métodos, etc añadiendo metadatos y anotaciones u observando o cambiando comportamientos. Son en realidad muy fáciles de entender y nos ayudan a comprender un poco más la magia que hacen los frameworks y librerías por detrás.

Puedes encontrar todo código visto en el artículo en mi repositorio en GitHub .