Nouvelles fonctionnalités du service Ivy Language d'Angular

Jetez un œil à ce qu'Angular a officiellement publié avec Ivy Language Service, de la vérification de type et de la détection d'erreurs à la cohérence de la plate-forme et au diagnostic de la base de code.

Vous avez peut-être lu notre introduction à Angular Language Service post , où nous vous avons donné un aperçu de l'expérimentation Ivy et de ses promesses. Maintenant, Angular a officiellement publié Ivy Language Service, et nous allons examiner de plus près les fonctionnalités incroyables qu'il offre.

Qu'est-ce qu'Ivy Language Service?

Chaque fois que vous utilisez un environnement de développement intégré (IDE) comme VS Code ou Sublime Text, vous remarquerez qu'il essaie de vous aider à écrire du code mieux et plus rapidement en fournissant des éléments tels que des fonctions de saisie semi-automatique de base, la vérification des erreurs et même des informations sur les éléments lors du survol.

Cette aide supplémentaire que vous obtenez est en fait fournie par le service linguistique de la langue que vous écrivez. Pour Angular, il s'agit maintenant du service de langage Ivy

Fonctionnement

Lorsque vous tapez du code, l'EDI parle au service de langage via le service de protocole de langage. Ainsi, pour chaque nouvelle modification, l'EDI demande simplement au service, "Est-ce correct?"

Le service peut répondre de plusieurs façons, par exemple, "Oui, c'est correct", "Oh, je pense qu'elle est essayer de déclarer une fonction. Veuillez lui montrer quelques options pour qu'elle puisse le faire facilement sans tout taper », ou même« Oh, ce n'est pas correct. Veuillez attirer son attention sur les erreurs qu'elle commet », puis dessinez les lignes ondulées rouges.

Vous pouvez voir comment cela contribue à produire une expérience formidable pour vous, le développeur qui écrit du code.

Voyons-le dans Action

Échafaudons une simple application Angular pour présenter les nouvelles fonctionnalités du service de langage. Vous pouvez installer cette configuration pour que vous puissiez suivre pleinement, ou consulter les gifs au fur et à mesure.

Ouvrez votre code VS et exécutez la commande ci-dessous:

ng new strictapp --strict

Désormais, l'indicateur strict rendra automatiquement les vérifications strictes vraies dans les options de compilation de votre projet. Dans le fichier de composant de votre application, cela devrait ressembler à ceci:

 import {Component} from '@ angular / core';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
classe d'exportation AppComponent {
  title = 'strictapp';
}

Maintenant, remplacez le code standard dans votre fichier app.component.html par ce bloc de code ci-dessous:

 < div   style  = " text-align :  centre  " > 
   < h1 > 
     Bienvenue à {{title}}!
   </  h1 > 
   < img   width  =  " 300 "    alt [19659031] =  " Logo angulaire "    src  =  « données: image / svg + xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8 + CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8 + CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg ==  " > 
 </  div > 
 < h2 >  Voici quelques liens pour vous aider à démarrer:  </  h2 > 
 < ul > 
   < li > 
      < h2 >   < a   target  =  " _blank "    rel  =  " noopener "    href  =  " https://angular.io/tutorial "  >  Tour of Heroes  </  a >   </  h2 > 
   </  li > 
   < li > 
      < h2 >   < a   target  =  " _blank "    rel  = [19659019] " noopener "    href  =  " https://angular.io/cli "  > [19659044] Documentation CLI  </  a >   </  h2  > 
   </  li > 
   < li > 
      < h2 >  Angular blog  < /  h2 > 
   </  li > 
 </  ul > 
 < h1 >  {{title}}  </  h1 > 

Ceci est le passe-partout pour les anciennes applications Angular, que nous utiliserons pour démontrer le service de langue.

Examinons maintenant de plus près certaines des dernières fonctionnalités du service de langue.

Cohérence sur toutes les plates-formes

] Avant cette nouvelle version, un service linguistique existait déjà. Cependant, au fur et à mesure que Angular progressait dans la version 11, il y avait une incohérence avec les plates-formes, ce qui commençait à conduire à de petits bugs et décalages. En effet, le langage était en V11 alimenté par Ivy, mais la structure sous-jacente du service de langue était toujours alimentée par l'ancien moteur de visualisation. Ceci est maintenant changé et tous les messages entre votre application, le processus de construction et votre IDE sont désormais cohérents.

Meilleure vérification de type avec des mises à jour de définition plus rapides

La vérification de type dans cette nouvelle version est meilleure pour vérifier les types et la définition les mises à jour sont encore plus rapides. Les définitions sont maintenant plus détaillées et tout ce qui est défini peut être identifié et développé. Le simple fait de survoler le montre très bien.

Un mécanisme de mise en cache plus intelligent

Bien que le moteur de rendu ait été modifié, des modifications majeures ont également été apportées au compilateur de langage lui-même. , ce qui affecte à son tour la façon dont la mise en cache est effectuée, la rendant meilleure et plus efficace. La communication de l'EDI au protocole de service est désormais également plus rapide.

D'autres choses étonnantes comme le support des tuyaux génériques, les directives structurelles et les directives avec des sélecteurs composés sont également livrées avec cela pour vous assurer que vous pouvez accéder à des éléments spécifiques de l'ensemble du projet à partir d'un seul endroit. 19659119] Vérification des erreurs meilleure et plus rapide (avec suggestions possibles)

Cette nouvelle mise à jour nous a également donné quelque chose de vraiment, vraiment utile: maintenant les erreurs sont détectées rapidement et la ligne ondulée rouge est dessinée lorsque vous vous trompez.

mieux! Nous recevons également maintenant des suggestions. Par exemple, "Essayez-vous de dire Angular et vous avez tapé Angela?" – ce qui est vraiment utile.

Cette réponse immédiate nous aidera à détecter les erreurs à la volée, réduisant ainsi les bogues que nous devrons résoudre plus tard dans le processus.

]

Diagnostic de base de code efficace et détecteur de composants plus intelligent

C'est aussi une fonctionnalité intéressante. Avec la nouvelle version, votre IDE peut désormais comprendre beaucoup de choses, comme des éléments d'écosystèmes tels que Angular Material et CDK ou diagnostiquer votre base de code. Lorsque vous utilisez des fonctionnalités de requête avancées de l'EDI telles que «rechercher toutes les références», vous voyez que l'EDI peut désormais modifier les éléments d'un composant et de son modèle correspondant en même temps. C'est vraiment génial.

Donc, le compilateur Angular, dans une tentative de compiler TypeScript plus rapidement tout en acceptant toutes les vérifications de type et les règles, a conçu une méthode où il génère du code TypeScript pour chaque modèle, puis TypeScript peut vérifier les erreurs à l'intérieur de ce code bloquer. Ce bloc de code généré est appelé TCB, bloc de contrôle de type. Cette nouvelle version du service de langage profite de TCB pour analyser les modèles.

Conclusion

Voilà! Les fonctionnalités étonnantes du désormais officiel Ivy Language Service pour Angular. Si vous utilisez déjà le service linguistique, vous obtenez maintenant une meilleure version. Et si vous êtes nouveau dans ce domaine, vous pourrez faire l'expérience d'une telle facilité comme jamais auparavant.

Pour le moment, cette mise à jour expérimentale est opt-in, comme vous l'avez remarqué avec notre démo, mais à l'avenir, elle deviendra par défaut, tout comme Ivy le rendu est désormais défini par défaut pour Angular. Si vous rencontrez des problèmes lors de son utilisation, soumettez-le ici sur GitHub et mentionnez Ivy Language Service. Si vous souhaitez approfondir la mise en œuvre, voici un lien vers l'API Angular Language Service . Bon piratage!