Rebonjour chers lecteurs et lectrices,
Bienvenue ! Dans la suite de cet article, nous allons réaliser notre tout premier projet à l’aide de TypeScript. Mais avant cela, il y a quelques petites configurations à effectuer avant le déploiement de l’application.
Étape 1 : Inialisation de notre répertoire
Tout d’abord, comme mentionné dans l’article précédent, assurez-vous d’avoir installé Node.js sur votre système et d’avoir un terminal ouvert. Dans le terminal, tapez la commande mkdir $nom-repertoire afin de créer un répertoire. Ensuite, dirigez-vous vers ce répertoire avec cd $nom-repertoire . Après cela, exécutez la commande npm init -y , qui créera un fichier ${package.json} par défaut contenant les détails du projet, y compris la version, les scripts et les dépendances.
mkdir $nom-repertoire
cd $nom-repertoire
npm init -y
{
"name": "premier-projet-typescript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Étape 2 : Installer TypeScript en tant que dépendance de développement
Nous allons maintenant ajouter TypeScript au projet en exécutant la commande suivante : npm install --save-dev typescript. Nous sommes à mi-chemin, chers lecteurs ! Ensuite, nous exécuterons la commande npm install --save-dev tsc-watch, qui nous permettra de voir en temps réel les modifications apportées aux fichiers TypeScript (.ts) sans avoir à recharger la page.
Puis, nous allons exécuter la commande npx tsc --init, qui créera le fichier ${tsconfig.json}. Ce fichier permet de configurer le compilateur TypeScript.
Création de votre tout premier projet
Nous sommes à deux pas de votre toute première application ! À l’aide du terminal, nous allons créer un répertoire src avec la commande mkdir src, puis un fichier TypeScript avec touch src/$index.ts . Dans ce répertoire, vous trouverez un fichier avec l’extension .ts, et c’est ici que vous pourrez commencer à coder.
Dans fichier $index.ts vous allez ajouter le code suivant :
const userName:string = "Ousseynou DIOP";
const salary = "3.000.000";
document.getElementById("name")!.innerHTML = userName;
document.getElementById("salary")!.innerHTML = salary;
Dans fichier $index.html vous allez ajouter le code suivant
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premier projet Typescript</title>
</head>
<body>
<h1>Premier projet Typescript</h1>
<h2>Bonjour M. <span id="name"></span>, votre salaire est: <span id="salary"></span> </h2>
<script src="build/index.js"></script>
</body>
</html>
En résumé, voici quelques étapes les étapes à suivre :
-
1. Initialisation du projet : Création d’un répertoire, initialisation d’un projet Node.js avec npm init -y, et génération du fichier
${package.json}. -
2. Installation de TypeScript : Ajout de TypeScript comme dépendance de développement avec npm install --save-dev typescript, configuration du compilateur avec npx tsc --init, et installation de tsc-watch pour surveiller les modifications.
-
3. Création des fichiers du projet : Mise en place d’un dossier src, création d’un fichier TypeScript
${index.ts}et d’un fichier HTML${index.html}pour afficher des informations dynamiques à l’aide de TypeScript.
Félicitations, vous avez démarré votre toute première application :
Références :
- DigitalOcean. How To Set Up a New TypeScript Project https://www.digitalocean.com/community/tutorials/typescript-new-project (Page consultée le 21 février 2025).
- Xarala. Qu'est-ce que TypeScript? Créez votre premier projet https://www.digitalocean.com/community/tutorials/typescript-new-project (Page consultée le 21 février 2025).
Commentaires1
Bonne article
Le guide est clair et détaillé sur le lancement d'une application TypeScript.J'aime l'ajout de tsc-watch pour suivre les modifications en temps réel.