Comprendre les types de base de typescript

TypeScript est le chouette (nouveau? Type) de la classe. Dans cet article, nous allons explorer les notions de base sur les "types", la fonction principale que ce super ensemble nous offre – et pourquoi vous souhaitez peut-être vous associer à tous les funz.

Vous avez peut-être entendu parler de cette chose appelée ] TypeScript . Peut-être que non – peut-être que vous vivez dans un ananas sous la mer ou que vous êtes toujours en train de pirater ActionScript 2. Quoi qu'il en soit, TypeScript est une chose, ça se passe, c'est pour rester, et ça prend de la force en la minute.

Intéressons-nous à l'essentiel.

Type-Script?

Alors, qu'en est-il – est- TypeScript ( TS pour être bref )

TypeScript est un sur-ensemble typé de JavaScript compilé au format JavaSscript.
– Microsoft

Bon, voilà un tas de termes fantaisistes pour dire qu’il s’agit d’une forme évoluée de JS. Un langage Superset est un langage construit sur TOP de l’autre, donc un peu comme une évolution Pokemon sans tous les jolis graphismes et la gentillesse.

Vous obtenez tout ce qui est JavaScript, plus un peu extra.

Qu'en est-il de la partie dactylographiée ? Cela signifie que TypeScript vous permet de dire à votre ordinateur, lorsque vous codez, ce que chaque partie de votre code contiendra. Pensez-y que vous attribuez des étiquettes à vos variables et à leurs fonctions pour les rendre strictes sur ce qu'elles devraient faire ou contenir.

Bien, qu'en est-il de la compilation compilée en JavaScript ? Pour le moment, les navigateurs ne peuvent pas comprendre le typeScript. Les navigateurs parlent JavaScript. Donc, lorsque vous travaillerez avec ce super ensemble vous devrez utiliser un outil pour le remettre en JavaScript avant de le déployer.

Tout cela semble très effrayant? Peut être. Avez-vous déjà travaillé avec SCSS? Aha! Eh bien, c’est un autre sur-ensemble, mais pour CSS. 1965

Parlons de Moneyz

Les variables JavaScript n’ont pas de type . Cela signifie que vous pouvez fondamentalement mettre tout et tout ce que vous voulez dans une variable et que ce code est tout à fait valide. Par exemple:

 let  myBox  =   "Ce serait une chaîne" ; 
myBox  =   23 ; 
myBox  =   { box :   true  } ; 
myBox  =   [  "il n'y en a pas d'autre"   "et celui-ci est à moi"  ] ;  

Ce code ci-dessus est complètement code JavaScript valide, une variable peut changer de contenu selon les besoins, car la boîte (variable) contenant ce contenu est flexible et s'adapte à tout ce que vous lui transmettez.

Sweet, ok, mais pourquoi Je veux perdre cette flexibilité?

Nous nous sommes tous retrouvés dans un scénario où quelque chose comme cela se produit. Vous avez une variable, qui est un nombre, disons que c'est le compte bancaire de l'utilisateur moneyz.

 let  moneyz  =   20 ;  

Jusqu'ici tout va bien, mais peut-être vous faire un appel quelque part qui va vous dire combien d'argent vient d'être déposé sur le compte. Mais quelque chose quelque part dans le pays de "comment vais-je résoudre ce problème" a fait de la deuxième valeur un STRING.

Vous codez donc joyeusement une fonction:

 function   incrementMoneyz  ( oldMoneyz  newMoneyz )   {
   return  oldMoneyz  +  newMoneyz ; 
} 

Cependant, dans la réalité, vous avez maintenant un cas où, disons, vous additionnez un nombre et une chaîne. Alors les 20 qu'elle avait auparavant, ajoutés au «20» qu'elle vient de déposer sur son compte…

déposons  de l'argent  =   20 ; 
 de déposons  ] =   "20" ; 
 let  moarMoneyz  =   incrementMoneyz  ( moneyz  de dépôt ). ];  

Désormais, TypeScript ne va pas vous protéger contre les bogues d'exécution et les API génériques, car au final, lorsque vous déployez votre code, ce sera du bon vieux JavaScript. Mais si cette erreur survient à cause d'un oubli dans votre code, TypeScript vous hurle dessus et, espérons-le, empêche cette erreur de se produire.

Alors, comment pouvons-nous définir des types sur nos variables?

Super simple, apprenons par l'exemple. Passez à la vitesse supérieure en TypeScript (TS, doigts douloureux).

 let  numéro  =   20 ; 
numéro  =   '20' ;  

Dans TS, le compilateur vérifie votre code comme un grand frère. Ainsi, dans l'exemple ci-dessus, vous déclarez une variable old-school numéro pas de type. Cependant, TS connaîtra et nommera cette variable un numéro . Pourquoi? Parce que vous y mettez un nombre au début!

Donc, ce qui va se passer, c'est que lorsque vous compilerez ce code, TS émettra une erreur parce que '20' n'est pas un numéro c'est une chaîne .

Simple, non? Ce type de, bien… type… est appelé un type inféré . Cela signifie que vous laissez à TS le gros du travail.

Et si, cependant, nous voulions garder tout le contrôle des types pour nous-mêmes? Ensuite, nous devons indiquer explicitement à TS ce que nous voulons.

 let  dactylographiéNombre :  numéro  =   20 ; 
typedNumber  =   '20' ; 

Même exemple, mais j'ai changé le nom de la variable en typeNumber pour plus de clarté.

Voir le : numéro . ] partie après la déclaration de variable? C'est le type réel! Il se lit comme suit:

Je souhaite une nouvelle variable, nommée typedNumber avec le type d'une valeur numérique et dont la valeur initiale est 20.

Lorsque le compilateur frappe la deuxième ligne et voit le string il se plaindra également, ainsi que le lancer et l'erreur – comme prévu.

Nombres, vérifiez.

Booleans

 let  myBool :  boolean  =   false ; 


 let  emptyBool  :  booléen ; 
emptyBool  =   'false' ;  

Cordes

 let  myString :  string  =   'TS is bae'  ; 
myString  =   [ 'EVIL' ] ;  


 citons  cite :  string  =   "Vous pouvez aussi utilisez des guillemets :) "; 


 laissez  émerveillé :  string  =  ": o "
 laissez  backtick :  string  =   `Et des backticks!  $ { impressionnant }   ` ; 

Les tableaux

 ont laissé  un tableau (ArrayOfNumbers ; ; ). []   =   [ 1  2  3  ; 
 let  a également [Arrangement]. :  Tableau  < numéro >   =    1  2  3  ] ; 


 let  anArrayOfStrings :  string  []   =   [ 'a'  'b'  'c' ] ; 
 let  a également un tableauArrayOfStrings :  Tableau  < chaîne > 19659106] =   [ 'a'  'b'  'c' ] ; 

Les tableaux ont un peu perdu pour comment ils sont tapés, car comme vous pouvez le voir ci-dessus Par exemple, nous avons deux syntaxes différentes. Dans le premier, nous disons au compilateur le contenu du tableau plus []. Dans la deuxième syntaxe, nous disons d'abord qu'il s'agit d'un Array puis de son contenu.

N'hésitez pas à utiliser celui qui vous convient le mieux.

Tuple

Alors qu'est-ce qu'un Tuple ?

En termes simples, un tuple est un tableau d’un nombre défini / fixe d’éléments dont vous savez ce qu’ils sont auparavant et qui sont de types différents.

Ceci s’explique mieux avec un Exemple. Imaginez que vous avez une API pour les utilisateurs que vous connaissez renvoie un tableau avec le nom à l'index 0, le nom de famille à l'index 1 et l'âge à l'index 2.

 laissez  userTuple :   [ string  string  numéro ] 
userTuple  =   [ 'Daenerys'   'Targaryen'   17 ] ; 
userTuple  =   [ 'Sansa'   'Stark'   'Les IDK la tuent déjà' ] ;  

Gardez gardez à l'esprit que, bien que les tuples soient super utiles, ils ne doivent être utilisés que dans les cas particuliers où vous savez que vos données vont avoir ce format, car même un simple changement comme un changement d'index de tableau rompra le type. ] Enum

Enum est un autre type de données nouveau en TypeScript auquel nous pouvons jouer.

Vous avez déjà été dans un scénario dans lequel vous souhaitez définir une liste afin de faire référence ultérieurement, et vous

Prenons, par exemple, l'appartenance d'un utilisateur à un site disposant de quelques options définies.

 enum  Membership  { Gratuit  Membre  Or } 

L’énumération ne fait que définir une liste. Ce n'est pas une variable – imaginez que vous ne définissiez que le modèle pour ce type.

Maintenant, pour l'utiliser, nous pourrions procéder comme suit:

 enum  Membership  { Gratuit  Membre  Or } 


 const  utilisateurMembership :  Membres  =  Membres .  ] Gratuit ; 

Examinez la variable const que nous configurons. Le type est en réalité un adhésion qui fait référence à l'énumération que nous avons créée auparavant. De cette façon, nous pouvons accéder à Membership.Free et le définir sur cette variable.

N'oubliez pas un élément important: la valeur de la variable de la variable est un nombre! L'énumération se comporte en réalité comme un tableau, où chaque élément obtient une valeur incrémentielle de 0 index. Vous pouvez également remplacer ces valeurs internes en les plaçant avec un signe égal.

 enum  Membres  { Gratuit  =   3  Membre  ,  Gold } 

Dans ce cas, Member aurait 4 ans et Gold serait 5 – ils incrémentent à partir de la dernière valeur connue, dans ce cas 3 définie par Free .

Mais, je suis un esprit libre!

Vous pouvez donc dire à un moment donné que ne pas avoir de types est un avantage. Si vous préférez que vos fonctions soient en mesure de renvoyer 3 types de données différents en fonction de la sortie. Que tu ne cèdes pas à ces chaînes!

Bonne nouvelle! Il existe un type de données supplémentaire pour ce type de situation: Any

Comme son nom l’indique, ce type de comportement fait que la variable se comporte de la même manière que le code JavaScript simple.

 const  anarchie :  Any  =   'YAAAAS' ; 
anarchy  =   9000 ;  

Envelopper

TypeScript arrive avec force dans le monde des développeurs FE, si vous l'avez mis en attente pour commencer à jouer avec et à apprendre, c'est maintenant le temps de le prendre et de commencer à peaufiner vos compétences dactylographiées.

Si vous voulez lire / en savoir plus sur, je vous recommande de vous plonger dans le manuel et les tutoriels disponibles sur leur site Web officiel . [19659003] Merci d'avoir lu!

Pour plus d'informations sur la création d'excellentes applications Web

Vous souhaitez en savoir plus sur la création d'excellentes applications Web? Tout commence avec Kendo UI – la bibliothèque complète de composants d'interface utilisateur qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

En savoir plus sur le Kendo UI

Testez gratuitement le Kendo UI