TypeScript est en train de devenir l’un des langages de programmation les plus populaires pour les organisations modernes.
TypeScript est un exposant JavaScript compilé et strictement typé (construit au-dessus du langage JavaScript). Ce langage typé statiquement, développé et maintenu par Microsoft, prend en charge les concepts orientés objet comme son sous-ensemble, JavaScript.
Ce langage de programmation open source a de nombreux cas d’utilisation, tels que la création d’applications Web, à grande échelle et mobiles. TypeScript peut être utilisé pour le développement frontend et backend. Il dispose également de divers frameworks et bibliothèques qui simplifient le développement et étendent ses cas d’utilisation.
Pourquoi utiliser TypeScript avec Node.js ? Cet article explique pourquoi TypeScript est considéré comme « meilleur » que JavaScript, comment l’installer à l’aide de Node.js, configurer et créer un petit programme à l’aide de TypeScript et Node.js.
Table des matières
TypeScript avec Node.js : avantages
- Typage statique facultatif : JavaScript est typé dynamiquement, ce qui signifie que le type de données d’une variable est déterminé au moment de l’exécution et non au moment de la compilation. D’autre part, TypeScript offre un typage statique facultatif, ce qui signifie qu’une fois que vous avez déclaré une variable, elle ne changera pas de type et ne prendra que certaines valeurs.
- Prévisibilité : lorsque vous traitez avec TypeScript, vous avez l’assurance que tout ce que vous définissez restera le même. Par exemple, si vous déclarez une certaine variable comme booléenne, elle ne pourra jamais se transformer en chaîne en cours de route. En tant que développeur, vous êtes assuré que vos fonctions resteront les mêmes.
- Détection rapide des bogues : TypeScript détecte la plupart des erreurs de type à un stade précoce, de sorte que leur probabilité de passer en production est faible. Cela réduit le temps que les ingénieurs passent à tester le code dans les étapes ultérieures.
- Pris en charge sur la plupart des IDE : TypeScript fonctionne avec la plupart des environnements de développement intégrés (IDE). La plupart de ces IDE fournissent la complétion de code et la coloration syntaxique. Cet article utilisera Visual Studio Code, un autre produit Microsoft.
- Code facile à refactoriser : vous pouvez mettre à jour ou refactoriser votre application TypeScript sans modifier son comportement. La présence d’outils de navigation et l’IDE comprenant votre code facilitent la refactorisation de la base de code sans effort.
- Utilise les packages existants : vous n’avez pas à tout créer à partir de rien ; vous pouvez utiliser les packages NPM existants avec TypeScript. Ce langage a également une communauté forte qui maintient et crée des définitions de type pour les packages populaires.
Comment utiliser TypeScript avec Node.js
Même si TypeScript présente ces avantages, les navigateurs modernes ne peuvent pas lire son code en clair. Par conséquent, le code TypeScript doit d’abord être transpilé en code JavaScript pour s’exécuter sur les navigateurs. Le code résultant aura les mêmes fonctionnalités que le code TypeScript d’origine et des fonctionnalités supplémentaires non disponibles en JavaScript.
Conditions préalables
- Node.js : Node est un environnement d’exécution multiplateforme qui permet d’exécuter du code JavaScript en dehors d’un environnement de navigateur. Vous pouvez vérifier si le nœud est installé sur votre machine à l’aide de cette commande ;
nœud -v
Sinon, vous pouvez télécharger Node.js depuis le site officiel. Exécutez à nouveau la commande ci-dessus après l’installation pour vérifier si elle a été correctement configurée.
- Un gestionnaire de packages de nœuds : vous pouvez utiliser NPM ou Yarn. Le premier est installé par défaut lorsque vous installez Node.js. Nous utiliserons NPM comme gestionnaire de packages dans cet article. Utilisez cette commande pour vérifier sa version actuelle ;
npm-v
Installation de TypeScript avec Node.js
Étape 1 : Configurer un dossier de projet
Nous allons commencer par créer un dossier de projet pour le projet TypeScript. Vous pouvez donner à ce dossier le nom de votre choix. Vous pouvez utiliser ces commandes pour commencer ;
nœud dactylographié mkdir
cd typescript-nœud
Etape 2 : Initialiser le projet
Utilisez npm pour initialiser votre projet à l’aide de cette commande ;
npm init -y
La commande ci-dessus créera un fichier package.json. L’indicateur -y dans la commande indique à npm d’inclure les valeurs par défaut. Le fichier généré aura une sortie similaire.
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}Configurer TypeScript avec Node.js
Étape 1 : Installez le compilateur TypeScript
Vous pouvez maintenant installer le compilateur TypeScript dans votre projet. Exécutez cette commande ;
npm install –save-dev tapuscrit
La sortie sur votre ligne de commande ressemblera à ceci ;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Remarque : L’approche ci-dessus installe TypeScript localement sur le dossier du projet sur lequel vous travaillez. Vous pouvez installer TypeScript globalement sur votre système, vous n’avez donc pas à l’installer à chaque fois que vous travaillez sur un projet. Utilisez cette commande pour installer TypeScript globalement ;
npm install -g typescript
Vous pouvez vérifier si TypeScript a été installé à l’aide de cette commande ;
tsc -v
Étape 2 : Ajouter des types Ambient Node.js pour TypeScript
TypeScript a différents types, tels que implicite, explicite et ambiant. Les types ambiants sont toujours ajoutés à la portée d’exécution globale. Utilisez cette commande pour ajouter des types ambiants ;
npm install @types/node –save-dev
Étape 3 : Créer un fichier tsconfig.json
Il s’agit du fichier de configuration qui spécifie toutes les options de compilation TypeScript. Exécutez cette commande fournie avec plusieurs options de compilation définies ;
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Cela sera affiché sur le terminal ;
Le fichier tsconfig.json, qui contient des valeurs par défaut et des commentaires, sera généré.
fichier tsconfig.json
Voici ce que nous avons configuré :
- Le rootDir est l’endroit où TypeScript recherchera notre code. Nous l’avons dirigé vers le dossier /src où nous écrirons notre code.
- Le dossier outDir définit où le code compilé est placé. Ce code est configuré pour être stocké dans le dossier build/.
Utilisation de TypeScript avec Node.js
Étape 1 : Créez le dossier src et le fichier index.ts
Nous avons maintenant la configuration de base. Nous pouvons maintenant créer une application TypeScript simple et la compiler. L’extension de fichier pour un fichier TypeScript est .ts. Exécutez ces commandes dans le dossier que nous avons créé aux étapes précédentes ;
mkdir src
touchez src/index.ts
Étape 2 : Ajoutez du code au fichier TypeScript (index.ts)
Vous pouvez commencer par quelque chose de simple comme;
console.log('Hello world!')Étape 3 : Compiler le code TypeScript en code JavaScript
Exécutez cette commande ;
npx tsc
Vous pouvez vérifier le dossier de construction (build/index.js) et vous verrez qu’un index.js a été généré avec cette sortie ;
TypeScript a été compilé en code JavaScript.
Étape 4 : Exécutez le code JavaScript compilé
N’oubliez pas que le code TypeScript ne peut pas s’exécuter sur les navigateurs. Nous allons donc exécuter le code dans index.js dans le dossier build. Exécutez cette commande ;
node build/index.js
Ce sera la sortie ;
Étape 5 : Configurez TypeScript pour qu’il se compile automatiquement en code JavaScript
Compiler manuellement le code TypeScript chaque fois que vous modifiez vos fichiers TypeScript peut faire perdre du temps. Vous pouvez installer ts-node (exécute directement le code TypeScript sans attendre d’être compilé) et nodemon (vérifie les modifications apportées à votre code et redémarre automatiquement le serveur).
Exécutez cette commande ;
npm install --save-dev ts-node nodemon
Vous pouvez ensuite accéder au fichier package.json et ajouter ce script ;
"scripts": {
"start": "ts-node ./src/index.ts"
}Nous pouvons utiliser un nouveau bloc de code à des fins de démonstration ;
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))Supprimez le fichier index.js (/build/index.js) et exécutez npm start.
Votre sortie sera similaire à celle-ci ;
somme de 3 nombres
Configurer TypeScript Linting avec eslint
Étape 1 : Installer eslint
Le peluchage peut être utile si vous souhaitez maintenir la cohérence du code et détecter les erreurs avant l’exécution. Installez eslint à l’aide de cette commande ;
npm install --save-dev eslint
Étape 2 : Initialiser eslint
Vous pouvez initialiser eslint à l’aide de cette commande ;
npx eslint --init
Le processus d’initialisation vous guidera à travers plusieurs étapes. Utilisez la capture d’écran suivante pour vous guider ;
Une fois le processus terminé, vous verrez un fichier nommé .eslintrc.js avec un contenu similaire à celui-ci ;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}Étape 3 : Exécutez eslint
Exécutez cette commande pour vérifier et pelucher tous les fichiers avec l’extension .ts ;
npx eslint . --ext .ts
Étape 4 : Mettre à jour package.json
Ajoutez un script lint sur ce fichier pour un lint automatique.
"scripts": {
"lint": "eslint . --ext .ts",
},TypeScript avec Node.js : bonnes pratiques
- Maintenez TypeScript à jour : les développeurs de TypeScript publient toujours de nouvelles versions. Assurez-vous que la dernière version est installée sur votre machine/dossier de projet et bénéficiez des nouvelles fonctionnalités et des corrections de bogues.
- Activer le mode strict : vous pouvez intercepter les erreurs de programmation courantes au moment de la compilation lorsque vous activez le mode strict sur le fichier tsconfig.json. Cela réduira votre temps de débogage, ce qui entraînera une plus grande productivité.
- Activer les vérifications NULL strictes : vous pouvez intercepter toutes les erreurs NULL et indéfinies au moment de la compilation en activant les vérifications NULL strictes sur le fichier tsconfig.json.
- Utilisez un éditeur de code qui prend en charge TypeScript : de nombreux éditeurs de code existent. Une bonne pratique consiste à choisir des éditeurs de code tels que VS Code, Sublime Text ou Atom qui prennent en charge TypeScript via des plugins.
- Utiliser des types et des interfaces : avec les types et les interfaces, vous pouvez définir des types personnalisés que vous pouvez réutiliser dans l’ensemble de votre projet. Une telle approche rendra votre code plus modulaire et facile à maintenir.
Emballer
Vous avez maintenant la structure de base d’une application créée avec TypeScript sur Node.js. Vous pouvez désormais utiliser les packages Node.js habituels, tout en écrivant votre code en TypeScript et en profitant de toutes les fonctionnalités supplémentaires fournies avec ce dernier.
Si vous débutez avec TypeScript, assurez-vous de bien comprendre les différences entre TypeScript et JavaScript.