Introduction aux mixins dans TypeScript

Dans cet article, vous découvrirez le concept des mixins dans TypeScript avec des termes simples et clairs. Ainsi, même si vous êtes nouveau dans le concept, vous pouvez suivre et être suffisamment motivé pour adopter cet outil dans votre flux de travail. [19659002] TypeScript

TypeScript est un langage compilé open-source, fortement typé, orienté objet, développé et maintenu par Microsoft. Il s'agit d'un sur-ensemble du JavaScript très populaire utilisé par des millions de projets (plus de 2 millions sur GitHub) qui a été conçu pour apporter des types statiques au JavaScript moderne. Le compilateur TypeScript lit le code TypeScript, qui contient des éléments tels que les déclarations de type et les annotations de type, et émet un JavaScript clair et lisible avec ces constructions transformées et supprimées.

What You Will Learn

Cet article est une introduction au concept et l'utilisation des mixins dans TypeScript et pourquoi ils sont importants. Il couvrira la syntaxe, les types et la façon dont les paramètres sont construits, le tout avec des exemples clairement définis que vous pouvez suivre vous-même dans l'environnement de développement intégré de votre choix.

Prérequis

Pour suivre correctement et apprendre de cet article , vous devrez préparer les éléments suivants sur votre ordinateur:

• Installation de Node : vous pouvez vérifier si Node est déjà installé en exécutant la commande ci-dessous:
  node -v [19659010] Installation de Node package manager : Node est généralement fourni avec une version requise de npm.
• Installation de TypeScript: Si vous avez installé le gestionnaire de packages Node, vous pouvez l'utiliser pour installer TypeScript globalement sur votre machine avec cette commande ci-dessous:
npm install -g TypeScript
• Environnement de développement intégré (IDE): Dans cet article, vous allez utiliser Visual Studio Code de l'équipe de Microsoft. Vous pouvez le télécharger ici . Dirigez-vous vers l'emplacement du fichier où vous l'avez téléchargé et installez-le en suivant l'invite et n'oubliez pas de cliquer sur l'option «Ajouter ouvert avec code» pour pouvoir accéder facilement à VS Code à partir de n'importe quel dossier de votre machine.
• Créez un nouveau dossier dans un emplacement de votre choix, puis ouvrez-le dans votre IDE.
• Créez un fichier appelé test.ts dans ce nouveau dossier où vous testerez vous-même tous les exemples du didacticiel au fur et à mesure que vous le parcourrez.

Cet article est écrit pour les développeurs TypeScript à tous les niveaux de connaissances - cela inclut mais n'est pas totalement axé sur les débutants. Les étapes de configuration d'un environnement de travail sont toutefois ajoutées pour le bénéfice des développeurs débutant avec TypeScript et l'application Visual Studio Code.

Extension des classes dans TypeScript

Tout comme dans de nombreux langages de programmation orientés objet, TypeScript a Des classes. Les classes sont des plans pour créer des objets. Elles sont essentiellement utilisées pour encapsuler les données trouvées dans les objets. Une classe TypeScript peut être définie comme suit:

 class   Subscribe   {
 Remind  ()  {
console .  log  ( 'Souvenez-vous de vous abonner à ma chaîne' ) ; 
  } 
} 

Cette classe contient une fonction appelée rappeler qui enregistre une chaîne dans la console du DOM. Si vous avez une nouvelle classe, dites YouTube:

 classe   Youtube   {
 Begin  ()  {
console .  log  ( «Bonjour, Bienvenue sur ma chaîne!» ) ; 
  } 
 Ending  () [19659023] {
console .  log  ( "Merci d'avoir regardé ma vidéo!" ) ; 
  } 
 } 

Et si vous vouliez l'avoir une classe qui étend les deux classes que nous avons déjà définies pour y avoir accès dans cette nouvelle classe, TypeScript ne le permet pas, elle est donc signalée comme une erreur. Vous pouvez l'essayer comme ceci:

 export   class   Recording   extend   Youtube  Subscribe  {} 

The Problem [19659003] Si vous essayiez cela, vous verriez des lignes grinçantes qui, lorsque vous survolez votre IDE, vous indiqueraient que les classes TypeScript ne peuvent étendre qu'une seule classe. Ce problème, lorsque vous le rencontrez au premier coup d'œil, vous vous souvenez peut-être des interfaces.

Interfaces

Dans TypeScript, les classes ne peuvent étendre qu'une seule classe, mais une interface peut étendre plus d'une classe. Utilisation d'une interface TypeScript pour résoudre notre problème:

 export   class   Recording   {} 
 export   interface   Recording   extend   Youtube [19659023] Abonnez-vous  {} 
 const  enregistrement  =   new   Recording 
enregistrement .  Rappeler  () ; 
enregistrement .  Ending  () ; 

Nous créons une interface puis essayons de voir si nous pouvons accéder aux fonctions à l'intérieur des deux classes que nous avons déjà définies. Si vous exécutez build dans votre terminal:

 tsc filename.ts
noeud filename.js

Vous verrez une erreur dans le terminal pour la construction disant que le rappel et la fin ne sont pas des fonctions. En effet, les interfaces TypeScript, même si elles peuvent étendre des classes, ne contiennent pas les implémentations de classe. Ceci nous ramène au problème initial où nous ne pouvons pas accéder à plus d'une classe dans une nouvelle classe dans TypeScript.

Solution: Mixins

Les mixins sont un moyen d'implémenter la réutilisation de composants dans le paradigme de la programmation orientée objet. Donc, pour notre espace de problème, nous pouvons utiliser des mixins avec une seule fonction d'assistance pour spécifier le comportement que nous voulions, qui est d'étendre deux classes dans une nouvelle classe dans TypeScript. Donc, vous pourriez être familier avec les mixins si vous êtes un développeur frontend et utilisez SASS. C'est le même concept, mais pour étendre les classes. La fonction d'assistance peut être trouvée dans la documentation officielle de TypeScript ici .

 function   applyMixins  ( derivedCtor :   any  baseCtors :   any  [] )   {
     baseCtors .  forEach  ( baseCtor  =>   {
       Object .  getOwnPropertyNames  ( baseCtor .  prototype ) .  forEach  ( name  =>   {
       Object .  defineProperty  ( derivedCtor .  prototype  name  Object .  getOwnPropertyDescriptor [19659023] ( baseCtor .  prototype  nom ) ) ; 
       } ) ; 
      } ) ; 
} 

Vous pouvez maintenant utiliser la fonction ApplyMixins pour décrire exactement ce que vous voulez, donc pour notre fichier ts, tout serait réuni pour ressembler à ceci:

 class [19659020] Youtube   {
  Begin  ()  {
   console .  log  ( «Bonjour, Bienvenue sur ma chaîne!» ) ; 
 } 
  Ending  () [19659023] {
   console .  log  ( "Merci d'avoir regardé ma vidéo!" ) ; 
 } 
} 
 class   S'abonner [19659021] {
  Rappeler  ()  {
   console .  log  ( 'N'oubliez pas de vous abonner à ma chaîne' ) ; 
 } 
} 

 function   applyMixins  ] ( derivedCtor :   any  baseCtors :   any  [] )   {
 baseCtors .  forEach  ( baseCtor  =>   {
   Object .  getOwnPropertyNames  ( baseCtor .  prototype ) .  forEach  ( name  =>   {
     Object .  defineProperty  ( derivedCtor .  prototype  name  Object .  getOwnPropertyDescriptor [19659023] ( baseCtor .  prototype  nom ) ) ; 
   } ) ; 
  } ) ; 
} 
 export   class   Recording   {} 
 export   interface   Recording   extend [19659020] Youtube  Abonnez-vous  {} 
 applyMixins  ( Recording  [ Youtube  S'abonner ] ) ; 
 const  enregistrement  =   nouvel   enregistrement 
enregistrement .  Rappeler  () ; 
enregistrement .  Ending  () ; 

Après avoir introduit la fonction d'assistance, il effectue le mixage pour nous en parcourant les propriétés de chacun des mixins et en les copiant à la cible des mixins, en remplissant les propriétés de remplacement avec leurs implémentations. La fonction ApplyMixins vous aide maintenant à spécifier l'interface exacte à partir de laquelle regarder et exécuter l'extension.

Si vous réexécutez le code de construction, vous devriez voir que le terminal a maintenant imprimé avec succès «N'oubliez pas de vous abonner à ma chaîne» à partir de la fonction de rappel dans la classe d'abonnement et «Merci d'avoir regardé ma vidéo» dans la fonction de fin de la classe YouTube, comme nous le voulions.

Conclusion

Ceci a été un article d'introduction sur les mixins dans TypeScript, comment ils aide à l'implémentation de classes étendues et comment elles peuvent être utilisées dans votre flux de travail. Restez en sécurité et heureux de pirater!