TypeScript est un sur-ensemble de JavaScript développé pour créer des applications à grande échelle plus sûres. Il ajoute un typage statique facultatif au langage, ce qui facilite la détection des erreurs avant la compilation.

Le langage introduit également certaines fonctionnalités qui n'existent pas dans JavaScript. Ceux-ci incluent les génériques, les classes, les interfaces, les énumérations et les décorateurs.

Apprenez à configurer votre premier projet TypeScript à partir de zéro en quelques étapes seulement.

Étape 1: Installation de TypeScript

Avant d'utiliser Manuscrit sur votre système, vous devez installer le compilateur TypeScript globalement.

Exécutez la commande suivante pour installer TypeScript globalement :

npm installer -g texte dactylographié

Étape 2: Configuration de votre projet

Pour configurer votre projet TypeScript, commencez par créer un répertoire de projet vide dans n'importe quel IDE de votre choix.

Ensuite, créez vos fichiers avec le .ts extension de fichier. TypeScript ne peut s'exécuter dans aucun environnement. Ainsi, il doit être compilé en JavaScript avant de pouvoir s'exécuter.

instagram viewer

Pour compiler vos fichiers TypeScript en JavaScript, accédez au répertoire de votre projet sur votre terminal. Puis cours tsc suivi du nom de votre fichier TypeScript.

Par exemple:

tscindice.ts

Cette commande créera un index.js fichier dans le même répertoire que votre index.ts fichier réside.

Ce comportement peut être indésirable car il rendrait votre projet difficile à gérer avec plusieurs .js et .ts fichiers dans le même répertoire.

Vous modifiez ce comportement par défaut et modifiez le comportement de votre compilateur TypeScript à l'aide de la tsconfig.json dossier.

Exécutez la commande suivante dans votre terminal pour créer un tsconfig.json fichier dans votre projet :

tsc --init

Cela génère un fichier contenant tous les paramètres de configuration de votre compilateur TypeScript.

Vous ne couvrirez que les bases nécessaires pour démarrer votre projet ici, mais vous pouvez en apprendre plus à ce sujet dans la documentation TypeScript tsconfig.

Étape 3: Configuration du compilateur TypeScript pour un meilleur flux de travail

La tsconfig.json contient des options de configuration pour le compilateur TypeScript divisé en sept sections :

  • Projets
  • Langue et environnement
  • Modules
  • Prise en charge de JavaScript
  • Émettre
  • Contraintes d'interopérabilité
  • Vérification de type
  • Complétude

La plupart des propriétés sont désactivées par défaut (elles sont commentées). Vous pouvez les activer et les modifier en les décommentant.

Voici les étapes à suivre pour modifier l'emplacement de vos fichiers JavaScript générés :

  1. Ouvert tsconfig.json et localisez le émettre section.
  2. Dans le émettre section, décommentez la répSortie propriété et spécifiez le répertoire dans lequel vous souhaitez stocker le compilé .ts des dossiers. Maintenant, chaque fois que tu cours tsc, ton .js les fichiers seront dans le dossier spécifié.

Fonctionnement tsc suivi du nom du fichier que vous souhaitez compiler n'est pas optimal pour votre flux de travail, en particulier lorsque vous devez compiler plusieurs fichiers.

Pour résoudre ce problème, le compilateur TypeScript fournit une propriété qui lui permet de compiler tous les fichiers d'un répertoire en une seule commande.

Suivez ces étapes pour le configurer :

  1. Ouvert tsconfig.json et localisez le modules section.
  2. Dans le modules section, décommentez la rootDir propriété ou rootDirs (si vous voulez que le compilateur compile plusieurs .ts répertoires dans .js) et spécifiez le ou les répertoires de fichiers.

Ces paramètres amélioreront votre flux de travail et faciliteront la maintenance de vos fichiers.

Les avantages de TypeScript

Le principal avantage de TypeScript par rapport à JavaScript est sa sécurité de type. TypeScript permet de détecter rapidement les bogues difficiles à trouver. Cette caractéristique le rend idéal pour créer des applications sécurisées et à grande échelle.