Node est un environnement d’exécution qui permet d’écrire du Javascript côté serveur. Il a été largement adopté depuis sa publication en 2011. L’écriture du JavaScript côté serveur peut être difficile car la base de code se développe en raison de la nature du langage JavaScript ; dynamique et faiblement dactylographié.
Les développeurs qui utilisent JavaScript à partir d’autres langues se plaignent souvent de l’absence de caractères statiques forts, mais c’est là que TypeScript intervient, pour combler cette lacune.
TypeScript est un super-ensemble de JavaScript typé (facultatif) qui peut aider à construire et à gérer des projets JavaScript à grande échelle. Il peut être considéré comme du JavaScript avec des caractéristiques supplémentaires comme un fort typage statique, une compilation et une programmation orientée objet.
Remarque : Le langage TypeScript est techniquement un super-ensemble de JavaScript, ce qui signifie que tout le code JavaScript est un code TypeScript valide.
Voici quelques avantages de l’utilisation de TypeScript :
Dans ce tutoriel, vous allez mettre en place un projet Node avec TypeScript. Vous créerez une application Express en utilisant le langage TypeScript et la transposerez dans un code JavaScript soigné et fiable.
Avant de commencer ce guide, vous devez avoir installé Node.js sur votre machine. Vous pouvez y parvenir en suivant le guide Comment installer Node.js et créer un environnement de développement local guide pour votre système d’exploitation.
Pour commencer, créez un nouveau dossier nommé node_project
et accédez à ce répertoire.
- mkdir node_project
- cd node_project
Ensuite, initialisez-le en tant que projet npm :
- npm init
Après avoir lancé npm init
, vous devrez fournir à npm des informations sur votre projet. Si vous préférez laisser le npm prendre des valeurs par défaut raisonnables, vous pouvez ajouter le drapeau y
pour ignorer les invites d’informations supplémentaires :
- npm init -y
Maintenant que votre espace de projet est mis en place, vous êtes prêt à passer à l’installation des dépendances nécessaires.
Avec un projet npm nu initialisé, l’étape suivante consiste à installer les dépendances nécessaires au lancement de TypeScript.
Exécutez les commandes suivantes depuis le répertoire de votre projet pour installer les dépendances :
- npm install -D typescript@3.3.3
- npm install -D tslint@5.12.1
Le drapeau -D
est le raccourci pour --save-dev
. Vous pouvez en savoir plus sur ce drapeau dans la documentation du npmjs.
Il est maintenant temps d’installer le framework Express :
- npm install -S express@4.16.4
- npm install -D @types/express@4.16.1
La deuxième commande installe Express** pour la prise en charge de TypeScript. Les types en TypeScript sont des fichiers, normalement avec une extension de .d.ts
. Les fichiers sont utilisés pour fournir des informations de type sur une API, dans ce cas le framework Express.
Ce paquet est nécessaire car TypeScript et Express sont des paquets indépendants. Sans le paquet @types/express
, il n’y a aucun moyen pour TypeScript de connaître les types de classes Express.
Dans cette section, vous allez paramétrer TypeScript et configurer le linting pour TypeScript. TypeScript utilise un fichier appelé tsconfig.json
pour configurer les options du compilateur pour un projet. Créez un fichier tsconfig.json
dans le root du répertoire du projet et collez-le dans le snippet suivant :
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist"
},
"lib": ["es2015"]
}
Passons en revue certaines des clés du snippet JSON ci-dessus :
module
: Spécifie la méthode de génération du code du module. Node utilise commonjs
.target
: Spécifie le niveau du langage de sortie.moduleResolution
: Cela aide le compilateur à déterminer à quoi se réfère une importation. La valeur node
imite le mécanisme de résolution des modules de Node.outDir
: Il s’agit de l’emplacement où les fichiers .js
sont produits après la transpilation. Dans ce tutoriel, vous le sauvegarderez sous dist
.Une alternative à la création et au remplissage manuels du fichier tsconfig.json
consiste à exécuter la commande suivante :
- tsc --init
Cette commande va générer un fichier tsconfig.json
bien commenté.
Pour en savoir plus sur les options de valeurs clés disponibles, la documentation officielle de TypeScript offre des explications sur chaque option.
Vous pouvez maintenant configurer le linting TypeScript pour le projet. Dans un terminal fonctionnant au root du répertoire de votre projet, que ce tutoriel a établi comme node_project
, exécutez la commande suivante pour générer un fichier tslint.json
:
- ./node_modules/.bin/tslint --init
Ouvrez le nouveau site tslint.json
et ajoutez la règle non-console
en conséquence :
{
"defaultSeverity": "error",
"extends": ["tslint:recommended"],
"jsRules": {},
"rules": {
"no-console": false
},
"rulesDirectory": []
}
Par défaut, le linter TypeScript empêche l’utilisation du débogage par console
d’où la nécessité d’indiquer explicitement au linter de révoquer la règle par défaut no-console
.
package.json
À ce stade du tutoriel, vous pouvez soit exécuter individuellement des fonctions dans le terminal, soit créer un script npm pour les exécuter.
Dans cette étape, vous créerez un script start
qui compilera et transpilera le code TypeScript, puis lancera l’application .js
résultante.
Ouvrez le fichier package.json
et mettez-le à jour comme il se doit :
{
"name": "node-with-ts",
"version": "1.0.0",
"description": "",
"main": "dist/app.js",
"scripts": {
"start": "tsc && node dist/app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@types/express": "^4.16.1",
"tslint": "^5.12.1",
"typescript": "^3.3.3"
},
"dependencies": {
"express": "^4.16.4"
}
}
Dans le snippet ci-dessus, vous avez mis à jour le chemin principal
et ajouté la commande start
à la section scripts. En regardant la commande start
, vous verrez que la commande tsc
est d’abord exécutée, puis la commande node
. Cette opération permet de compiler et d’exécuter la sortie générée avec node
.
La commande tsc
demande à TypeScript de compiler l’application et de placer la sortie .js
générée dans le répertoire spécifié outDir
tel qu’il est défini dans le fichier tsconfig.json
.
Maintenant que TypeScript et son linter sont configurés, il est temps de construire un serveur Node Express.
Tout d’abord, créez un dossier src
dans le root du répertoire de votre projet :
- mkdir src
Créez ensuite un fichier nommé app.ts
dans celui-ci :
- touch src/app.ts
À ce stade, la structure du dossier devrait ressembler à ceci :
├── node_modules/
├── src/
├── app.ts
├── package-lock.json
├── package.json
├── tsconfig.json
├── tslint.json
Ouvrez le fichier app.ts
avec un éditeur de texte de votre choix et collez le code suivant :
import express from 'express';
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
if (err) {
return console.error(err);
}
return console.log(`server is listening on ${port}`);
});
Le code ci-dessus crée un serveur Node qui écoute les requêtes sur le port 3000
. Lancez l’application en utilisant la commande suivante :
- npm start
S’il fonctionne correctement, un message sera enregistré sur le terminal :
- Outputserver is listening on 3000
Maintenant, vous pouvez visiter http://localhost:3000
dans votre navigateur et vous devriez voir le message :
- OutputThe sedulous hyena ate the antelope!
Ouvrez le fichier dist/app.js
et vous trouverez la version transposée du code TypeScript :
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = express_1.default();
const port = 3000;
app.get('/', (req, res) => {
res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
if (err) {
return console.error(err);
}
return console.log(`server is listening on ${port}`);
});
//# sourceMappingURL=app.js.map
À ce stade, vous avez configuré avec succès votre projet Node pour utiliser TypeScript.
Dans ce tutoriel, vous avez appris pourquoi TypeScript est utile pour écrire un code JavaScript fiable. Vous avez également découvert certains des avantages à travailler avec TypeScript.
Enfin, vous avez mis en place un projet Node en utilisant le framework Express, mais vous avez compilé et exécuté le projet en utilisant TypeScript.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.