janvier 31, 2021

Décorateurs de TypeScript

Décorateurs (décorateurs en anglais) sont une proposition d’inclure dans JavaScript qui nous permet d’ajouter des annotations et des métadonnées ou de modifier le comportement des classes, des propriétés , méthodes, paramètres et accesseurs. Avec TypeScript, nous pouvons les utiliser en activant la propriété ExperimentalDecorArors de la tsconfig.json de notre projet ou si nous avons décidé de compiler à l’aide de la commande tsc, Placez toujours l’option --experimentalDecorators ---target ES5.

Il est très important de savoir que les décorateurs étant encore une proposition expérimentale peuvent avoir des changements à l’avenir. Toutefois, la présence de ceux-ci dans le développement Web actuel est remarquable, en particulier dans les projets qui utilisent dossier (angulaire, vue, nid, pochoir, etc.). À travers des exemples simples, je vais essayer d’expliquer simplement comment ils fonctionnent et comment créer leurs propres décorateurs.

Comment fonctionnent-ils?

Un décorateur est une fonction qui, selon laquelle Nous voulons de décorer, vos arguments seront différents. Ils utilisent le formulaire @expressionexpression évaluera la fonction qui sera appelée. Ensuite, je vais expliquer les décorateurs les plus fréquents:

décorateur de classe

est appliqué sur le constructeur de classe et peut être utilisé pour observer, modifier ou remplacer la définition initiale de la classe. Votre seul argument est target ce serait la classe décorée, dactylographiée comme Function ou any :

<7e0175e7df ">

Dans l’exemple précédent, nous imprimons simplement la classe décorée par la console. Si nous voulons faire quelque chose de plus avancé, nous devrons passer des paramètres aux décorateurs. Pour cela, nous pouvons écrire une usine de décorateur, qui est simplement une fonction qui renvoie une autre fonction qui sera appelée à l’exécution par le décorateur. Dans le code ci-dessous, nous faisons quelque chose de plus intéressant: nous écrasions une propriété avec la valeur que nous avons transmise en tant que paramètre sur le décorateur.

« 7 / div>

malgré l’initialisation de notre objet avec le nom John, le décorateur écrase la propriété. Il convient de noter que les décorateurs sont appelés au moment de la déclaration de classe, et non lorsqu’un objet est installé.

Méthode décorateur

Ils ont le même objectif que les classes d’observation , Modifier ou remplacer. La fonction prend trois paramètres:

  1. target: méthode décorée, généralement dactylographiée comme Object
  2. propertyKey: nom de la méthode, incliné sous string | symbol

: descripteur d’objet de propriété (valeur, écriture, énumérable, configurable, plus d’informations ici)

Nous pouvons créer un décorateur pour enregistrer des fonctionnalités de journal ou modifier et / ou prolonger le comportement , dans ce cas, nous devrons modifier la propriété value du descriptor, attribuez-lui une fonction (et non une fonction de flèche, car Nous perdrions le contexte de this).

Considérez l’exemple suivant, où le décorateur log imprime la méthode Classe par console, nom, descripteur de propriété et les arguments lorsque la méthode est appelée:

D Immobile Enceur et paramètres

sont plus simples que ce qui précède, un décorateur de propriété doit prendre comme paramètres target, qui est le prototype de la classe et propertyKey, le nom de la propriété. Enfin, les décorateurs de paramètres, fonctionnent de même, mais avec le paramètre supplémentaire parameterIndex, qui indique la position sur le tableau, par exemple:

= « 490530A7CB »>

Conclusion

Grâce à des outils tels que Thypscript, nous pouvons utiliser des fonctionnalités qui seront incluses dans la norme à l’avenir. . Les décorateurs sont simplement des fonctions qui nous permettent de donner une signification particulière aux classes, aux méthodes, etc. en ajoutant des métadonnées et des annotations ou des comportements d’observation ou d’évolution. Ils sont en fait très faciles à comprendre et nous aident à comprendre un peu plus la magie que les cadres et librairies de derrière.

Vous pouvez trouver n’importe quel code vu dans l’article de mon référentiel dans Github.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *