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 sur le langage JavaScript). Cette statiqueally Le langage typé, développé et maintenu par Microsoft, prend en charge des 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, le configurer et le créer.ate un petit programme utilisant TypeScript et Node.js. 

TypeScript avec Node.js : avantages

• Typage statique facultatif : JavaScript est dynamiqueally typé, 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'un autre côté, TypeScript propose un typage statique facultatif, ce qui signifie qu'une fois que vous déclarez 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 à un stade précoce, leur probabilité de passer en production est donc faible. Cela réduit le temps que les ingénieurs passent à tester le code later étapes. 
• Pris en charge sur la plupart des IDE : TypeScript fonctionne avec la plupart des Integrated environnements de développement (IDE). La plupart de ces IDE fournissent la complétion du code et la coloration syntaxique. Cet article utilisera Visual Studio Code, un autre produit Microsoft. 
• Code facile à refactoriser : Vous pouvez mettre à jourate ou refactorisez votre application TypeScript sans modifier son comportement. La présence d'outils de navigation et de l'IDE comprisanding votre code facilite la refactorisation de la base de code effortmoins. 
• Utilise les packages existants: Vous n'êtes pas obligé de créerate tout à partir de zéro ; vous pouvez utiliser les packages NPM existants avec TypeScript. Cette langue possède également une communauté forte qui entretient et créeates définitions de type pour les packages populaires. 

Comment utiliser TypeScript avec Node.js

Même si TypeScript présente ces avantages, le b modernerowsLes utilisateurs ne peuvent pas lire son code sous forme simple. Par conséquent, le code TypeScript doit d'abord être transpilé en code JavaScript pour être exécuté sur b.rowseuh. Le code résultant aura les mêmes fonctionnalités que le code TypeScript original et extra fonctionnalités non disponibles en JavaScript. 

Pré-requis 

• Node.js : Le nœud est une croix-platenvironnement d'exécution de formulaire qui permet d'exécuter du code JavaScript en dehors d'abrowsenvironnement. Vous pouvez vérifier si le nœud est installé sur votre machine à l'aide de cette commande ;

node -v

Autreswise, 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éeraate un fichier package.json. L'indicateur -y dans la commande indique à npm d'inclure les valeurs par défaut. Le génératriceated le fichier 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 la localisation TypeScriptally sur le dossier du projet sur lequel vous travaillez. Vous pouvez installer TypeScript globally sur votre système, vous n'avez donc pas besoin de l'installer à chaque fois que vous travaillez sur un projet. Utilisez cette commande pour installer TypeScript globally;

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, Explicitet 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éerate a 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 ;

La tsconfig.json Le fichier, qui contient quelques valeurs par défaut et des commentaires, sera généréated.

Voici ce que nous avons configuré :

• La rootDir C'est là que TypeScript cherchera notre code. Nous l'avons dirigé vers /src dossier où nous allons écrire notre code. 
• La 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éerate src dossier et fichier index.ts

Nous avons maintenant la configuration de base. Nous pouvons maintenant créerate une simple application TypeScript et compilez-la. L'extension de fichier d'un fichier TypeScript est .ts. Exécutez ces commandes dans le dossier que nous créonsated dans le prevétapes judicieuses ;

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éated 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 browseuh. Nous allons ainsi 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

Manuel de compilation du code TypeScriptally chaque fois que vous modifiez vos fichiers TypeScript, vous pouvez 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 automatiqueally redémarre 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 ;

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 en utilisant cette commande ;

npx eslint --init

L'initialisation process vous guidera à travers plusieurs étapes. Utilisez la capture d'écran suivante pour vous guider :

Une fois que le process est 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 : mise à jourate package.json 

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

"scripts": {

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

  },

TypeScript avec Node.js : bonnes pratiques

• Gardez TypeScript à jourate: Les développeurs TypeScript publient toujours de nouvelles versions. Assurez-vous d'avoir le lateère version installée sur votre dossier machine/projet et bénéficiez de nouvelles fonctionnalités et de corrections de bugs. 
• 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 disposez désormais de la structure de base d'une création d'application.ated avec TypeScript sur Node.js. Vous pouvez maintenant utiliser les packages Node.js habituels, mais écrivez quand même votre code en TypeScript et profitez de tout le extra fonctionnalités qui accompagnent ce dernier. 

Si vous débutez avec TypeScript, assurez-vous de bien comprendre les différences entre TypeScript et JavaScript.