Le Duo Dynamique pour Web Dev

par


L’essor de TypeScript dans le développement moderne

TypeScript gagne rapidement en popularité, devenant un choix privilégié pour de nombreuses organisations modernes. Ce langage, qui s’appuie sur JavaScript, offre un système de typage statique, ce qui le distingue de son prédécesseur. Développé et maintenu par Microsoft, TypeScript prend en charge les concepts de programmation orientée objet, tout comme JavaScript.

En tant que projet open source, TypeScript trouve son utilité dans divers scénarios, notamment le développement d’applications web, de grandes applications d’entreprise et d’applications mobiles. Il peut être utilisé aussi bien pour le frontend que pour le backend. De plus, un large éventail de frameworks et de bibliothèques simplifient son utilisation et étendent ses possibilités.

Cet article explore l’intérêt d’utiliser TypeScript avec Node.js, en expliquant pourquoi il est considéré comme une amélioration par rapport à JavaScript. Nous verrons comment l’installer avec Node.js, le configurer et créer un exemple de programme simple.

Avantages de TypeScript avec Node.js

  • Typage statique optionnel : Contrairement à JavaScript, qui est dynamiquement typé, TypeScript permet un typage statique optionnel. Cela signifie que le type d’une variable est défini à la compilation et ne peut être modifié pendant l’exécution, offrant plus de contrôle et de prévisibilité.
  • Prévisibilité accrue : Avec TypeScript, vous avez la garantie que le type d’une variable restera constant. Par exemple, une variable déclarée comme booléenne le restera tout au long de son utilisation, évitant ainsi les erreurs inattendues.
  • Détection précoce des erreurs : TypeScript détecte la plupart des erreurs de type dès la phase de compilation, réduisant ainsi le risque qu’elles ne se produisent en production. Cela permet de gagner du temps lors des tests.
  • Compatibilité avec les IDE : TypeScript est compatible avec la plupart des environnements de développement intégrés (IDE), qui offrent des fonctionnalités d’autocomplétion et de coloration syntaxique. Visual Studio Code, un autre produit Microsoft, sera utilisé dans cet article.
  • Refactoring facilité : Les applications TypeScript peuvent être mises à jour et refactorisées sans altérer leur comportement. L’IDE, comprenant le code, facilite ces modifications.
  • Réutilisation de packages existants : TypeScript peut utiliser les packages NPM, et une large communauté propose des définitions de types pour les packages populaires.

Mise en œuvre de TypeScript avec Node.js

Malgré ses avantages, les navigateurs ne peuvent exécuter directement le code TypeScript. Il doit donc être transpilé en JavaScript. Le code JavaScript résultant aura les mêmes fonctionnalités que le code TypeScript original, et peut offrir des optimisations non disponibles en JavaScript pur.

Prérequis

  • Node.js : Cet environnement d’exécution permet d’exécuter du code JavaScript en dehors d’un navigateur. Vous pouvez vérifier si Node.js est installé en exécutant la commande suivante dans votre terminal : node -v. Sinon, vous pouvez le télécharger depuis le site officiel et vérifier son installation avec la même commande.
  • Gestionnaire de packages Node : Vous pouvez utiliser NPM ou Yarn. NPM est installé par défaut avec Node.js et sera utilisé dans cet article. Pour vérifier sa version, exécutez : npm -v.

Installation de TypeScript

Étape 1 : Création du dossier de projet

Commencez par créer un dossier pour votre projet TypeScript. Vous pouvez le nommer comme vous le souhaitez. Utilisez les commandes suivantes dans votre terminal :

mkdir typescript-node

cd typescript-node

Étape 2 : Initialisation du projet

Utilisez npm pour initialiser le projet avec la commande suivante :

npm init -y

Cette commande crée un fichier package.json, en utilisant les valeurs par défaut spécifiées par l’option -y. Ce fichier aura une structure similaire à la suivante:

{
    "name": "typescript-node",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

Configuration de TypeScript

Étape 1 : Installation du compilateur TypeScript

Installez le compilateur TypeScript dans votre projet avec la commande suivante :

npm install --save-dev typescript

Vous devriez voir une sortie similaire à :

added 1 package, and audited 2 packages in 26s
found 0 vulnerabilities

Notez que cette approche installe TypeScript localement, dans le dossier du projet. Vous pouvez aussi installer TypeScript globalement avec :

npm install -g typescript

Vérifiez l’installation globale avec :

tsc -v

Étape 2 : Ajout des types ambiants Node.js

TypeScript utilise différents types, dont les types ambiants, qui sont accessibles globalement. Pour ajouter les types ambiants de Node.js, exécutez :

npm install @types/node --save-dev

Étape 3 : Création du fichier tsconfig.json

Ce fichier contient les options de compilation de TypeScript. Créez-le avec la commande suivante :

npx tsc --init --rootDir src --outDir build
--esModuleInterop --resolveJsonModule --lib es6
--module commonjs --allowJs true --noImplicitAny true

Un fichier tsconfig.json sera créé avec des options de compilation configurées.

Voici les configurations importantes :

  • rootDir : Spécifie le dossier où TypeScript recherchera le code source, ici /src.
  • outDir : Détermine l’emplacement du code compilé, ici build/.

Utilisation de TypeScript avec Node.js

Étape 1 : Création du dossier src et du fichier index.ts

Maintenant que la configuration est en place, créez un dossier src et un fichier index.ts (l’extension .ts est utilisée pour les fichiers TypeScript) :

mkdir src

touch src/index.ts

Étape 2 : Ajout de code au fichier index.ts

Vous pouvez commencer avec un simple message :

console.log('Hello world!')

Étape 3 : Compilation du code TypeScript

Compilez votre code TypeScript en JavaScript en exécutant :

npx tsc

Un fichier index.js est créé dans le dossier build. Son contenu devrait être:

Étape 4 : Exécution du code JavaScript compilé

Puisque le code TypeScript n’est pas exécutable directement, exécutez le code JavaScript compilé :

node build/index.js

La sortie affichera:

Étape 5 : Configuration de la compilation automatique

Pour automatiser la compilation lors de la modification des fichiers, installez ts-node (exécute directement TypeScript) et nodemon (redémarre le serveur lors des changements) :

npm install --save-dev ts-node nodemon

Modifiez le fichier package.json et ajoutez le script suivant :

"scripts": {
    "start": "ts-node ./src/index.ts"
}

Pour un exemple, remplacez le contenu de index.ts par le code suivant :

function sum (num1:number, num2:number, num3:number){
    return num1 + num2 +num3;
}
console.log(sum(10,15,30))

Supprimez index.js (/build/index.js) et exécutez npm start. La sortie devrait afficher:

somme de 3 nombres

Configuration de l’analyse de code avec ESLint

Étape 1 : Installation d’ESLint

ESLint est un outil d’analyse statique qui vous permet de maintenir un code cohérent et d’identifier les erreurs potentielles avant l’exécution. Installez-le avec la commande :

npm install --save-dev eslint

Étape 2 : Initialisation d’ESLint

Initialisez ESLint avec la commande :

npx eslint --init

Le processus d’initialisation vous guidera à travers plusieurs étapes. Vous pouvez utiliser la capture d’écran suivante comme référence :

Un fichier nommé .eslintrc.js sera créé 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écution d’ESLint

Pour vérifier et analyser tous les fichiers .ts, exécutez :

npx eslint . --ext .ts

Étape 4 : Mise à jour du fichier package.json

Ajoutez un script lint pour automatiser l’analyse du code :

"scripts": {
    "lint": "eslint . --ext .ts",
},

Meilleures pratiques pour TypeScript avec Node.js

  • Maintenir TypeScript à jour : Les nouvelles versions de TypeScript apportent des corrections et des fonctionnalités améliorées.
  • Activer le mode strict : Cela permet de détecter les erreurs courantes dès la compilation, réduisant le temps de débogage.
  • Activer les vérifications NULL strictes : Cela aide à identifier et à corriger les erreurs liées aux valeurs NULL et indéfinies.
  • Utiliser un éditeur de code compatible : Des éditeurs tels que VS Code, Sublime Text ou Atom offrent un bon support de TypeScript grâce à des plugins.
  • Utiliser des types et des interfaces : Cela vous permet de définir des types personnalisés pour une meilleure modularité et maintenabilité de votre code.

Conclusion

Vous avez maintenant les bases pour développer une application avec TypeScript et Node.js. Vous pouvez utiliser les packages Node.js habituels tout en bénéficiant des avantages du typage statique offert par TypeScript. Assurez-vous de bien comprendre les différences fondamentales entre TypeScript et JavaScript.



Tweetez
Partagez
Épingle
Partagez
Partagez
0 Partages