Qu'est-ce que TypeScript?

Présentation de TypeScript

Donc, comme vous le savez probablement, JavaScript étend son empreinte au quotidien. C'est à la fois écrasant et incroyable ce que vous pouvez faire avec la langue de nos jours.

Cependant, à mesure que de plus en plus de projets à grande échelle commencent à utiliser JavaScript, le processus visant à rendre le code plus facile à écrire et plus maintenable devient de plus en plus difficile.

C'est un problème que Microsoft a reconnu très tôt et ils ont trouvé une solution: TypeScript La première version a été publiée le 1er octobre 2012.

JavaScript vs TypeScript

Où est Waldo

Bon, maintenant que nous avons une idée générale de ce qu'est TypeScript, jouons à une petite partie de Where's Waldo .

Dans la capture d'écran ci-dessus, vous pouvez repérer les différences entre JavaScriptet TypeScriptdans ce programme de multiplication très simple qui imprime simplement le produit de deux nombres que j'ai prédéfinis.

Mais quelles sont ces différences? ? ️

Ce sont des types !

Il en JavaScriptva de même pour le typage dynamique en ce sens qu'une variable déclarée comme un nombre peut être transformée en une chaîne où, comme TypeScriptle typage statique, vous déclarez à l'avance le type de valeur que la variable contiendra et cela ne change pas.

Dans ce multiplication.tsfichier, je déclare toutes ces variables comme étant des nombres afin qu'elles ne puissent pas être changées en autre chose.

En substance, TypeScript essaie d'aider JavaScript à atteindre de nouveaux sommets et à devenir très évolutif. Il peut être mis en évidence par les caractéristiques suivantes:

  • langage de programmation gratuit et open-source développé et maintenu par Microsoft
  • super-ensemble syntaxique strict de JavaScript qui se compile en JavaScript brut
  • facilite le développement d'applications à grande échelle écrites en JavaScript
  • étend JavaScript en ajoutant des types statiques, des classes, des modules, des interfaces et des génériques

? FUN FACT TypeScript a eu 7 ans le 1er octobre 2019.

Version

La dernière version stable disponible est TypeScript 3.7 (début 2020).

Comment installer TypeScript

Installation

Pour commencer vous-même, les deux éléments dont vous aurez besoin sont le compilateur TypeScript et un éditeur prenant en charge TypeScript.

Dans la capture d'écran ci-dessus, j'installe à la fois le compilateur et TSLint (qui est similaire à ESLint) à l'aide npmdu terminal intégré de Visual Studio Code.

Installation de TypeScript

Cette commande installera le package TypeScript en tant que dépendance dans votre projet en utilisant npmun gestionnaire de packages populaire.

npm i typescript

À noter Plusieurs options sont disponibles en npmfonction de l'emplacement d'installation de TypeScript.

  • npm i -g typescript pour installer globalement le package TypeScript
  • npm i -D typescript pour installer le package TypeScript en tant que dépendance de développement

Compiler un seul fichier en JavaScript

tsc multiplication.ts

Remarque Vous pouvez configurer ce processus de compilation TypeScript en tant que script npm personnalisé dans votre package.json.

Options de configuration

touch tsconfig.json

Il existe également la possibilité de créer un tsconfig.jsonfichier qui spécifie les fichiers racine et les options du compilateur.

Dans votre tsconfig.jsonfichier, par exemple, vous pouvez spécifier que vous voulez que TypeScript compile vers ES5 au lieu d'ES6.

Exemple rapide

Multiplication

Dans la capture d'écran ci-dessus, vous pouvez voir deux fichiers - multiplication.jset multiplication.ts.

Ce programme imprime simplement le produit de deux nombres que j'ai prédéfinis.

multiplication.ts

let a: number = 10; let b: number = 2; function showProduct(first: number, second: number): void { console.info("Mathematical! The result is " + first * second + "."); } showProduct(a, b); // Mathematical! The result is 20.

Une fois que j'ai fini de créer multiplication.ts, je peux le compiler en JavaScript en utilisant la tsccommande qui signifie compile TypeScript.

multiplication.js

var a = 10; var b = 2; function showProduct(first, second) { console.info("Mathematical! The result is " + first * second + "."); } showProduct(a, b); // Mathematical! The result is 20.

Bam - nous venons de compiler avec succès TypeScript en JavaScript!

TSLint

TSLint

Un linter est un outil qui détecte et signale les erreurs dans les langages de programmation, y compris les erreurs stylistiques.

Pour TypeScript, TSLint est l'option de linter la plus populaire.

TSLint est un outil d'analyse statique extensible qui vérifie le code TypeScript pour la lisibilité, la maintenabilité et les erreurs de fonctionnalité.

Il est largement pris en charge par les éditeurs et les systèmes de construction modernes et peut être personnalisé avec vos propres règles, configurations et formateurs de charpie.

Installation de TSLint

Cette commande installera globalement le TSLintpackage à l'aide d' npmun gestionnaire de packages populaire.

npm i -g tslint

Terrain de jeux

Terrain de jeux

Si vous souhaitez essayer TypeScript sans l'installer, visitez le TypeScript Playground.

Le Playground a une complétion automatique intégrée et la possibilité de voir directement le JavaScript émis.

Autres ressources

Pour en savoir plus sur l'installation, consultez l'annexe d'installation.

Si vous n'avez besoin que d'un vérificateur de type et que vous ne voulez pas compiler votre programme, lisez à propos de Flux.

  • Démarrage rapide
  • Documentation
  • Code source