Comment utiliser TypeScript avec Node.js : le duo dynamique pour le développement Web

TypeScript est en train de devenir l'un des langages de programmation les plus populaires pour les organisations modernes. 

Manuscrit 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. 

TypeScript with Node.js: Benefits

• 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. 
• Facile à repérer les bogues tôt : TypeScript détecte la plupart des erreurs de type tôt, 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 Code Visual Studio, 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'êtes pas obligé de 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. 

How to use TypeScript with 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. 

Pré-requis 

• 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 ;

node -v

Sinon, vous pouvez télécharger Node.js du 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œud : Vous pouvez utiliser NPM ou Yarn. Le premier est installé par défaut lorsque vous installer 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 ;

mkdir typescript-node

cd typescript-node

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 typescript

La sortie sur votre ligne de commande ressemblera à ceci ;

added 1 package, and audited 2 packages in 26s

found 0 vulnerabilities

Notes: 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 Implicit, Explicit et Ambient. 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 tsconfig.json filet

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 ;

Les tsconfig.json fichier, qui contient des valeurs par défaut et des commentaires, sera généré.

Voici ce que nous avons configuré :

• Les rootDir C'est là que TypeScript cherchera notre code. Nous l'avons dirigé vers /src dossier où nous allons écrire notre code. 
• Les outDir dossier définit où le code compilé est placé. Ce code est configuré pour être stocké dans build/ dossier.

Utilisation de TypeScript avec Node.js

Étape 1: Créer src dossier et 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

touch 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 la build dossier (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 le code TypeScript directement sans attendre d'être compilé) et nodemon (vérifie votre code pour les modifications 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))

Supprimer l' index.js fichier (/build/index.js) et exécutez npm start. 

Votre sortie sera similaire à celle-ci ;

Configure TypeScript Linting with 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 en utilisant 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 le .ts extension;

npx eslint . --ext .ts

Étape 4 : Mettre à jour package.json 

Ajouter un lint script sur ce fichier pour le peluchage automatique. 

"scripts": {

    "lint": "eslint . --ext .ts",

  },

TypeScript with Node.js: Best practices

• Maintenez TypeScript à jour : Les développeurs 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 nulles et indéfinies au moment de la compilation en activant des vérifications nulles strictes sur le fichier tsconfig.json. 
• Utiliser un éditeur de code prenant en charge TypeScript: De nombreux éditeurs de code existent. Une bonne pratique consiste à choisir éditeurs de code tels que VS Code, Sublime Text ou Atom qui prennent en charge TypeScript via des plugins. 
• Utilisez les types et les interfaces : Avec types et 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. 

Récapitulation

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.