Ce qui me passionne dans TypeScript 4.0

C'est maintenant le meilleur moment pour adopter TypeScript. Jetons un coup d'œil à la récente version 4.0 et voyons pourquoi!

TypeScript

TypeScript, un sur-ensemble de JavaScript, est un langage compilé open-source, fortement typé et orienté objet développé et maintenu par l'équipe de Microsoft . TypeScript garantit que même avant d'enregistrer votre code, il est vérifié de type, puis supprime même tous les types pour avoir un JavaScript propre et lisible. Il est également utilisé dans vos éditeurs préférés pour effectuer des tâches telles que la saisie semi-automatique et la refactorisation. TypeScript possède l'une des communautés de développeurs dont la croissance est la plus rapide, et avec la nouvelle version 4.0, il n'y a pas de changements majeurs, c'est donc le meilleur moment pour démarrer avec TypeScript.

Quelques informations générales

TypeScript a enregistré d'énormes croissance au cours des derniers mois avec des nombres de téléchargements mensuels sur npm dépassant les 50 millions en juillet 2020. Il est clair qu'il y a un grand amour pour TypeScript. L'année dernière, l'enquête sur l'état de JavaScript aux développeurs a demandé à des milliers de développeurs de voter TypeScript comme deuxième langage le plus apprécié, et près de 90% disent qu'ils l'utiliseront à nouveau.

Installation de TypeScript

Pour ce nouveau version, les développeurs de TypeScript peuvent l'obtenir via NuGet à ce lien ou utiliser le gestionnaire de packages Node avec cette commande:

 npm install  -  D typescript

Le support IDE pour TypeScript pour cette version est déjà sur Visual Studio et même Visual Studio Code en installant la version I nsiders sur le lien ici .

Cette version du langage s'est concentrée sur une plongée plus profonde dans l'expressivité, la productivité et l'évolutivité et de nombreuses améliorations sur l'expérience autour des tuples. Examinons maintenant un aperçu de certains des changements apportés par cette nouvelle version.

Opérateurs d'affectation de court-circuit

En JavaScript, vous pouvez réécrire les commandes suivantes comme ci-dessous pour des opérations simples comme l'addition, la soustraction, la division et multiplication:

 a  + =  b ; 


a  - =  b ; 


a  * =  b ; 


a  / =  b ; 


a  ** =  b ; 


a  << =  b ; 

TypeScript les prend également en charge et maintenant qu'ECMAScript progresse également et ajoute de nouveaux opérateurs d'affectation comme && = || = et ?? = this nouvelle version livrée avec un support pour eux aussi. Un membre de la communauté Wenlu Wang a apporté cette nouvelle fonctionnalité.

Ces opérateurs sont bons pour permuter et même se conformer au principe DRY. Un exemple d'utilisation serait lorsqu'un utilisateur pourrait écrire du code comme le suivant:

 a  =  a  &&  b ; 
a  =  a  ||  b ; 
a  =  a ? ?  b ; 

Ou même un bloc de code if comme celui-ci ci-dessous:

 si   (!  a )   {
    a  =  b ; 
} 

Pour commencer à l'utiliser, envisagez d'exécuter cet exemple ci-dessous pour voir en quoi cela diffère de toujours l'exécution de l'affectation.

  const  obj  =   {
     obtenir   accessoire  ()   {
        console .  log  ( "getter has run" ) ; 
        
         return  Math .  random  ([19659030])   <  0.5 ; 
    } 
     set   prop  ( _val :   boolean  )   {
        console .  log  ( "setter has run" ) ; 
    } 
} ; 
 function   foo [19659030] ()   {
    console .  log  ( "right side évalué" ) ; 
     return   true ; 
} 
console .  log  ( "Celui-ci exécute toujours le setter" ) ; 
obj .  prop  =  obj .  prop  ||   foo  () ; 
console .  log  ( "Celui-ci * parfois * exécute le setter" ) ; 
obj .  prop  ||  =   foo  () ; 

Labeled Tuple Elements

À partir de cette nouvelle version, Les éléments de tuple seront désormais étiquetés pour améliorer l'expérience et encourager la lisibilité. Ceci est très important car la lisibilité est essentielle. Imaginez un scénario comme celui-ci utilisant un tuple comme paramètre de repos:

  function   foo  ( ...  args :   [ string   numéro ] ) :   void   {
    
} 

Cette déclaration ne doit pas être différente de celle ci-dessous:

  function   foo  ( arg0 :   string  arg1 :   numéro ) :   void   {
    
} 

pour tout moment foo doit être appelé.

  foo  ( "hello"   42 ) ;  
 foo  ] ( "bonjour"   42   vrai ) ;  
 foo  ( "bonjour" ) ; 

Nous voyons à quel point la lisibilité peut être importante avec ces derniers. Même si la modélisation de ces derniers n'affectera en aucune façon la vérification de type, il devient plus difficile de l'utiliser sans étiquettes. L'équipe TypeScript a donc expédié des étiquettes pour les tuples.

  type  Range  =   [ start :   number  end :   numéro ] ; 

Pour approfondir encore davantage la relation entre les listes de paramètres et les types de tuple, la syntaxe des éléments restants et des éléments optionnels reflète la syntaxe des listes de paramètres:

  type  Foo  =   [ premier :   numéro  deuxième ? :   string   ...  reste  :   any  [] ] ; 

Une chose à retenir si vous utilisez ces étiquettes est que tous les autres éléments à l'intérieur du tuple doivent être étiquetés.

  type  Bar  =   [ first  :   chaîne   numéro ] ; 

À noter: les libellés ne nous obligent pas à nommer nos variables différemment lors de la déstructuration. Ils sont uniquement là pour la documentation et l'outillage.

Une autre chose à noter est que vous n'avez pas à nommer vos variables différemment lors de la déstructuration car elles existent uniquement pour la documentation.

  function   foo [19659030] ( x :   [ premier :   chaîne  deuxième :   numéro ]  )   {
    
    
     let   [ a  b ]   =  x ; 
    
} 

Pour en savoir plus sur les tuples étiquetés, voir le PR dans le lien ici .

Class Property Inference from Constructors

Dans cette nouvelle version, lorsque vous activez noImplicitAny, TypeScript utilise désormais le flux de contrôle analyse pour déterminer le type des propriétés de vos classes.

  class   Square   {
    
    
    région ; 
    sideLength ; 
     constructeur  ( sideLength :   number )   {
         this .  sideLength  =  sideLength ; 
         this .  area  =  sideLength  **   2 ; 
    } 
} 

Lorsque tous les chemins de constructeur ne sont pas assignés à une instance, TypeScript l'étiquera comme indéfini.

  class   Square   {
    sideLength ; 
     constructeur  ( sideLength :   number )   {
         if   ( Math . [19659033] random  () )   {
             this .  sideLength  =  sideLength ; 
        } 
     } 
     get   area  ()   {
         return   this .  sideLength  **   2 ; 
        
        
    } 
} 

Dans certains cas, comme lorsque vous avez une méthode initialize vous devrez fournir une annotation de type explicite et une assertion d'affectation définie (! ) si vous êtes dans strictPropertyInitialization .

  class   Square   {
    
    
    sideLength ! :   numéro ; 
    
    
     constructeur  ( sideLength :   numéro )   {
         this [19659030].  initialize  ( sideLength ) 
    } 
     initialize  ( sideLength :   number )   {
         this .  sideLength  =  sideLength ; 
    } 
     get   area  ()   {[19659201] renvoie   this .  sideLength  **   2 ; 
    } 
} 

Custom JSX Factories

In JSX, a fragment est un élément utilisé comme balise englobante pour vous permettre de renvoyer plusieurs éléments enfants. Cela a été implémenté dans TypeScript il y a quelque temps, mais après que l'équipe de TypeScript ait vu à quel point il était adopté massivement, ils l'ont rendu encore plus facile à utiliser. Cette nouvelle version de TypeScript permet aux développeurs de personnaliser la fabrique de fragments via l'option jsxFragmentFactory désormais disponible.

Voir cet exemple. Le fichier tsconfig.json ci-dessous indique à TypeScript de transformer JSX d'une manière compatible avec React, mais bascule chaque appel d'usine sur h au lieu de React.createElement et utilise Fragment au lieu de React.Fragment .

 {
   "compilerOptions" :   {
     "target" : [19659287] "esnext" 
     "module" :   "commonjs" 
     "jsx" :   "react" [19659285] "jsxFactory" :   "h" 
     "jsxFragmentFactory" :   "Fragment" 
  } 
} 

Il peut y avoir des cas où vous devez avoir une fabrique JSX différente sur chaque fichier, vous pouvez maintenant utiliser le nouveau commentaire pragma / ** @jsxFrag * / . Comme ceci:

 import   { h  Fragment }   from   "preact" ; 
 let  stuff  =   <> 
     < div >  Bonjour  < /  div > 
 < / > ; 

Ceci est remplacé par la sortie JavaScript ci-dessous:

 import   { h  Fragment }   from   "preact" ; 
 let  stuff  =   h  ( Fragment   null 
     h  ( "div"   null   "Hello" ) ) ; 

Speed ​​Improvements in build Mode

Auparavant, la compilation du code TS après une compilation précédente avait été faite avec des erreurs sous l'indicateur incrémental serait extrêmement lent lorsque vous utilisiez l'indicateur noEmitOnError. Cela est normalement dû au fait qu'aucune mise en cache n'est effectuée pour la session de compilation précédente. Cela change dans cette nouvelle version de TypeScript car ces scénarios ont maintenant une augmentation de vitesse en mode build .

Cette nouvelle version vous permet également d'utiliser l'indicateur noEmit lorsque vous voulez faire une compilation incrémentielle. Cela n'était pas autorisé auparavant; cependant, c'est maintenant, car la vitesse est devenue une priorité dans ce cas.

Conclusion

C'est un ensemble de fonctionnalités qui me passionnent dans la nouvelle version 4.0 de TypeScript. La prochaine itération est déjà en cours pour la version 4.1 et vous pouvez voir la progression ici . Il est important de souligner le travail effectué dans la version par les contributions des membres de la communauté. La communauté TypeScript est l'une des meilleures que j'ai vues et ne cesse de croître. Quelle est votre nouvelle fonctionnalité préférée?