Comment utiliser TypeScript avec votre projet Node.js

TypeScript est pratique pour créer des applications complexes et des architectures robustes comme les microservices. Bien sûr, TypeScript ne peut rien faire que JavaScript ne puisse faire, mais il peut rendre les projets complexes plus faciles à gérer. Le typage strict de TypeScript et la prise en charge des interfaces en font un outil idéal pour la programmation orientée objet. Nous avons vu de nombreuses entreprises se tourner vers TypeScript pour coder leur backend.

Il n'y a pas de meilleur moment pour commencer à utiliser TypeScript dans votre projet Node.js que maintenant. Mais comment pouvez-vous le configurer pour votre projet Node.js? Vous le découvrirez dans cet article.

Qu'est-ce que TypeScript ?

TypeScript est une version compilée et strictement typée de JavaScript développée et maintenue par Microsoft. Le code TypeScript se transpile en JavaScript.

La nature stricte de TypeScript aide les développeurs à éviter les bogues dans leur code. Il ne compilera que le code qui satisfait aux règles de ses types de données spécifiés. Cela rend le code TypeScript plus robuste que son homologue JavaScript pur.

Il prend également en charge la programmation fonctionnelle et orientée objet. Toutes ces fonctionnalités le rendent hautement évolutif et adapté au développement d'applications complexes.

Comment configurer TypeScript dans Node. JS

Vous devrez extraire quelques configurations ici et là pour commencer à utiliser TypeScript avec votre projet Node.js. Mais pas de soucis, c'est facile.

Cependant, assurez-vous que vous installer le package Node.js npm avant de procéder.

Initialiser un fichier package.json

Ouvrez votre terminal et créez un dossier de projet. Entrez ensuite ce nouveau répertoire et initialisez un projet Node.js :

initialisation npm

La commande ci-dessus crée un package.json fichier pour stocker vos dépendances.

Installer TypeScript et d'autres dépendances

Ensuite, allez-y et installez TypeScript dans votre projet Node.js :

npm i -D dactylographié

Le -RÉ Le mot-clé garantit que TypeScript est installé dans le cadre du devDependencies dans package.json.

Vous devrez également installer @types/express, une définition TypeScript pour Express.js :

npm installer -D @les types/express

Ensuite, initialisez un tsconfig.json dossier. Ceci détaille les options de base du compilateur pour votre projet :

npx tsc --init

La commande ci-dessus crée un tsconfig.json fichier dans le dossier racine de votre projet.

Installez également Express.js. Vous pouvez ignorer cette étape si vous avez uniquement l'intention de gérer des serveurs avec les primitives HTTP intégrées de Node.js. Mais Express.js rend cela facile :

npm installer Express

Ensuite, installez Nodemon, un package qui redémarre automatiquement votre serveur chaque fois que des modifications sont apportées à votre code. Assurez-vous de l'installer globalement pour qu'il fonctionne :

npm installer -g nodemon

Configurez TypeScript avec Node. JS

Ouvrez le tsconfig.json fichier que vous avez initialisé précédemment à l'aide de votre éditeur de code choisi. Il peut y en avoir beaucoup dans ce dossier. Bien que vous puissiez configurer ce fichier dans sa forme actuelle, vous pouvez remplacer tout son contenu par celui ci-dessous pour le rendre plus simple.

Voici tout ce dont vous avez besoin dans tsconfig.json pour se lancer :

{
"options du compilateur": {
"module": "commonjs",
"esModuleInterop": vrai,
"cibler": "es6",
"moduleRésolution": "nœud",
"sourceMap": vrai,
"répSortie": "distance" //Spécifie le répertoire du transpileur. 
 },
"bibliothèque": ["es2015"]
}

Ouvert package.json. Voici à quoi cela ressemble actuellement après l'installation de TypeScript et Express :

Ensuite, ajoutez les configurations suivantes au scénarios déployer:

"scénarios": {
"test": "écho \"Erreur: aucun test spécifié\"&& sortie 1",
"construire": "npx tsc",
"Démarrer": "nœud ./dist/app.js",
"distance": "tsc -p .",
 "dev": "nodemon ./src/app.ts", //Remplacer cette avec la bonne annuairecheminpour app.ts dans ton Cas
"taper": "module"
}

La configuration ci-dessus indique à votre serveur de démarrer sur app.js, le transpileur. Pas de soucis, il s'agit d'un fichier par défaut qui sera créé automatiquement dans un distance dossier lorsque vous exécutez le construire scénario. Vous le ferez plus tard sur toute la ligne.

La configuration spécifie ensuite le script de développement principal comme app.ts.

Par conséquent, lorsque vous démarrez l'environnement de développement, Nodemon court app.ts. Node.js le compile ensuite en JavaScript à l'intérieur app.js—qui communique avec le serveur HTTP.

Ensuite, créez un src dossier dans le répertoire racine de votre projet. Dans ce dossier, créez un fichier TypeScript vide et nommez-le app.ts.

Créer le répertoire Transpiler

Le transpiler est un fichier JavaScript qui compile le code TypeScript en JavaScript natif. Ainsi, cela garantit que le serveur peut se rapporter à votre code en tant que JavaScript au lieu du script strictement typé.

Ainsi, alors que TypeScript gère la structure du code, le fichier transpiler le compile en JavaScript.

Exécutez maintenant le construire script pour créer le distance répertoire transpiler automatiquement :

construction d'exécution npm

La commande ci-dessus compile votre code TypeScript en JavaScript. Le dossier créé contient deux fichiers; app.js et app.js.map.

Ouvrir package.json de nouveau. Vous verrez une clé dans le tableau nommé principale. Vous pouvez voir que sa valeur indique index.js. Remplacez-le par le app.js (transpiler) répertoire de fichiers :

"principale": "./dist/app.js",

Après formatage, package.json devrait ressembler à ceci :

Voilà pour la partie configurations.

Créer et exécuter une requête HTTP

Essayez maintenant de créer et d'exécuter une requête HTTP via le serveur Express.js pour voir si votre code se compile comme il se doit.

À l'intérieur app.ts:

importer express, {Demande, Réponse} depuis 'Express'
constante app = express()
app.get('/', async (req: requête, res: réponse)=>{
 console.log('Bonjour le monde')
 res.send('Bonjour le monde')
})
constante port = 8080
app.listen (port, (): vide=>{
console.Journal(`L'application écoute à http://localhost:${port}`)
})

Ensuite, ouvrez la ligne de commande dans le répertoire racine de votre projet et exécutez le développeur script pour démarrer votre projet :

npm run dev

Ouvrez votre navigateur et accédez à hôte local: 8080, et vous verrez la réponse (Bonjour le monde). Vous le verrez également dans le terminal si vous avez appliqué le console.log commande comme nous l'avons fait dans l'exemple ci-dessus.

TypeScript a des perspectives de forte demande

Il n'y a guère de différence entre TypeScript et JavaScript. Mais le premier facilite le développement avec l'ajout d'un typage strict.

TypeScript est un langage précieux dans les frameworks frontend comme Angular, et nous ne pouvons pas nier ses performances et son évolutivité. Il devient de plus en plus populaire et les perspectives d'emploi pour les développeurs TypeScript ne cessent d'augmenter.

Une introduction à Angular

Lire la suite

A propos de l'auteur