TypeScript pour les débutants, partie 1: Démarrer

Commençons ce tutoriel avec la question: "Qu'est-ce que TypeScript?"

TypeScript est un sur-ensemble dactylographié de JavaScript qui compile en JavaScript simple. Comme analogie, si JavaScript était CSS, alors TypeScript serait SCSS.

Tout le code JavaScript valide que vous écrivez est également un code TypeScript valide. Cependant, avec TypeScript, vous pouvez utiliser le typage statique et les dernières fonctionnalités qui sont compilées en JavaScript simple, qui est prise en charge par tous les navigateurs. TypeScript vise à résoudre le problème de la mise à l'échelle de JavaScript, et il fait un très bon travail.

Dans ce tutoriel, vous commencerez par lire les différentes fonctionnalités de TypeScript et pourquoi l'apprendre est une bonne idée. Le reste des sections de l'article couvrira l'installation et la compilation de TypeScript, ainsi que certains éditeurs de texte populaires qui vous offrent une prise en charge de la syntaxe TypeScript et d'autres fonctionnalités importantes.

Pourquoi avons-nous besoin de TypeScript?

Nous utilisons les langages de programmation pour instruire les ordinateurs comment nous voulons qu'ils fassent quelque chose. Ils agissent essentiellement comme un moyen de communication. Cependant, les ordinateurs ne comprennent pas directement le code JavaScript, PHP ou Python que nous écrivons. Tout le code lisible par l'homme que nous écrivons est finalement converti en code machine que les ordinateurs peuvent exécuter et comprendre.

Les langages de programmation modernes sont écrits avec les besoins du programmeur. Cela signifie que différents langages de programmation sont conçus avec différents ensembles de fonctionnalités en raison de la façon dont ils sont destinés à être utilisés. JavaScript a été écrit pour faciliter la réalisation des choses en écrivant une quantité minimale de code.

JavaScript est devenu beaucoup plus populaire depuis ses débuts et est désormais largement utilisé pour des projets à petite et à grande échelle. Certaines limites de JavaScript qui étaient acceptables lors de la rédaction de petits programmes peuvent entraver la productivité lorsque vous travaillez sur de grands projets avec de nombreux membres de l'équipe.

TypeScript a été créé pour répondre à ces limitations en ajoutant une variété de fonctionnalités telles que la vérification du type pour vous aider à attraper rapidement toutes les erreurs qui pourraient surgir lors de la modification du code dans des projets à grande échelle.

Pourquoi apprendre TypeScript?

Si vous n'avez jamais utilisé TypeScript auparavant, vous vous demandez peut-être pourquoi vous devriez vous soucier de l'apprendre quand il se compile en JavaScript à la fin.

Permettez-moi de vous assurer que vous n'aurez pas à passer beaucoup de temps à apprendre dactylographié. TypeScript et JavaScript ont une syntaxe très similaire, et vous pouvez simplement renommer votre mot-clé const pour spécifier que nous voulons empêcher toute modification de la valeur de cette variable via la réaffectation ou empêcher sa redéclaration. Cependant, cela ne signifie pas que la valeur de la variable est immuable. Il existe encore d'autres façons de le changer. Voici un exemple:

 const fruits = ["pommes", "mangues", "bananes"];<br> constables constables = ["pommes de terre", "oignons", "concombres"];<br><br> fruits.push ("orange");<br> // ["pommes", "mangues", "bananes", "orange"]<br><br> fruits [0] = "papayas";<br> // ["Papayas", "mangues", "bananes", "orange"]<br><br> fruits = légumes // erreur<br>

Jusqu'à la dernière ligne, le code ci-dessus est parfaitement valide JavaScript et ne lancera aucune erreur. Nous avons déclaré indéfini comme une valeur. Cette approche est logique car elle nous permet d'ajouter, de supprimer ou de mettre à jour les propriétés d'un objet. Cependant, il peut également s'agir d'une source d'erreurs ou d'un comportement inattendu. Voici un exemple:

 Laissez Guy = {<br> Nom: «Mario»,<br> Âge: 56<br> }<br><br> console.log (guy.name «est« guy.ahe »ans.»);<br> // Mario n'a pas défini d'années.<br>

Les mauvaisports AHE ne sont pas considérés comme une erreur en JavaScript, mais il aurait été pris en dactylographie. Essayez de compiler le code ci-dessus de TypeScript à JavaScript, et vous verrez une erreur sur PeriMetTriangle (). Il en résulte une valeur absurde étant la sortie comme le périmètre de notre triangle.

 fonction perimètreTriangle (a, b, c) {<br> console.log (`périmètre du triangle est: $ {ABC}`);<br> }<br><br> perimètreTriangle (20, 30, "pomme de terre");<br> // Le périmètre du triangle est: 50 Potoato<br><br> perimètreTriangle ("pomme de terre", 10);<br> // Le périmètre du triangle est: Potato10 Underfined<br><br> perimetertriangle ();<br> // périmètre du triangle est: nan<br><br> perimètreTriangle (20, 30, 50);<br> // Le périmètre du triangle est: 100<br>

Même si vous n'apportez aucune modification du code ci-dessus et essayez de le compiler de TypeScript à JavaScript, vous obtiendrez toujours des erreurs avec les deuxième et troisième appels de fonction en raison d'un décalage du nombre d'arguments fournis. Cependant, nous pouvons ajouter plus d'informations à notre définition de fonction en spécifiant le type d'arguments que nous nous attendons à ce que la fonction perimeterTriangle() accepte.

 fonction perimetertriangle (a: numéro, b: numéro, c: numéro) {<br> console.log (`périmètre du triangle est: $ {ABC}`);<br> }<br><br> perimètreTriangle (20, 30, "pomme de terre");<br> // Erreur: argument de la chaîne de type non attribuable au numéro de type.<br><br> perimètreTriangle ("pomme de terre", 10);<br> // Erreur: s'attendait à trois arguments mais en a obtenu 2.<br><br> perimetertriangle ();<br> // Erreur: attend trois arguments mais a obtenu 0.<br><br> perimètreTriangle (20, 30, 50);<br> // Le périmètre du triangle est de 100.<br>

Maintenant, même le premier appel de fonction lance une erreur en raison de l'inadéquation du type d'argument. TypeScript vous aidera à assister à de nombreuses erreurs et à gagner beaucoup de temps à long terme.

Compilation de type dactylographié en javascript

Supposons que vous ayez écrit un code de type dactylographié dans un fichier .ts . Les navigateurs ne pourront pas exécuter ce code par eux-mêmes. Vous devrez compiler le dactylographie en JavaScript simple qui peut être compris par les navigateurs.

Si vous utilisez un IDE, le code peut être compilé sur JavaScript dans l'IDE lui-même. Par exemple, Visual Studio vous permet de compiler directement le code TypeScript en JavaScript. Vous devrez créer un fichier tsconfig.json où vous spécifiez toutes les options de configuration pour compiler votre fichier TypeScript en javascript.

L'approche la plus adaptée aux débutants lorsque vous ne travaillez pas sur un grand projet est d'utiliser le terminal lui-même. Tout d'abord, vous devez passer à l'emplacement du fichier TypeScript dans le terminal, puis exécuter la commande suivante.

 TSC First.ts<br>

Cela créera un nouveau fichier nommé first.js au même emplacement. Gardez à l'esprit que si vous aviez déjà un fichier nommé first.js , il serait écrasé.

Si vous souhaitez compiler tous les fichiers dans le répertoire actuel, vous pouvez le faire avec l'aide de wildcards. N'oubliez pas que cela ne fonctionnera pas récursivement.

 tsc * .ts<br>

Enfin, vous ne pouvez compiler que certains fichiers spécifiques en fournissant explicitement leurs noms en une seule ligne. Dans de tels cas, les fichiers JavaScript seront créés avec des noms de fichiers correspondants.

 tsc first.ts product.ts bot.ts<br>

Jetons un coup d'œil au programme suivant, qui multiplie deux nombres dans TypeScript.

 Soit A: nombre = 12;<br> Soit B: nombre = 17;<br><br> fonction showProduct (premier: numéro, deuxième: numéro): void {<br> Console.log ("Le produit est:" Première * seconde);<br> }<br><br> ShowProduct (A, B);<br>

Le code TypeScript ci-dessus se compile au code JavaScript suivant lorsque la version ciblée est définie sur ES6. Notez comment toutes les informations de type que vous avez fournies dans TypeScript ont maintenant disparu après la compilation. En d'autres termes, le code est compilé en JavaScript qui peut être compris par le navigateur, mais vous pouvez faire le développement dans un bien meilleur environnement qui peut vous aider à attraper beaucoup de bugs.

 Soit a = 12;<br> Soit b = 17;<br> fonction showProduct (premier, deuxième) {<br> Console.log ("Le produit est:" Première * seconde);<br> }<br> ShowProduct (A, B);<br>

Dans le code ci-dessus, nous avons spécifié le type de variables a et b en tant que nombres. Cela signifie que si plus tard, vous essayez de définir la valeur de b sur une chaîne comme "Apple", TypeScript vous montrera une erreur que "Apple" n'est pas attribuable au number de type. Votre code sera toujours compilé en JavaScript, mais ce message d'erreur vous fera savoir que vous avez fait une erreur et vous aidera à éviter un problème pendant l'exécution.

Voici une capture d'écran qui montre le message d'erreur dans Visual Studio Code:

L'exemple ci-dessus montre comment TypeScript continue de vous donner des conseils sur les erreurs possibles dans le code. C'était un exemple très basique, mais lorsque vous créez de très grands programmes, des messages comme ceux-ci contribuent grandement à vous aider à écrire du code robuste avec moins de chances d'erreur.

Réflexions finales

Ce didacticiel de démarrage dans la série était destiné à vous donner un très bref aperçu des différentes fonctionnalités de typeScript et à vous aider à installer la langue avec quelques suggestions pour les éditeurs d'ides et de texte que vous pouvez utiliser pour le développement. La section suivante a couvert différentes façons de compiler votre code TypeScript à JavaScript et vous a montré comment TypeScript peut vous aider à éviter certaines erreurs courantes.

J'espère que vous avez aimé ce tutoriel. Le prochain tutoriel de la série discutera des différents types de variables disponibles dans TypeScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!