🔰 Apprendre 🔰

📃 0 - Sommaire

• I - Présentations
  • A. Qu'est-ce que Typescript ?
  • B. Qu'est-ce que NodeJS ?
• II - Prérequis
  • A. Installer Node, npm et npx
• III - Setup du projet
  • A. Gestion des dépendances
  • B. Installation de Typescript
• IV - Gestion du projet
  • A. Structure et Arborescence du projet
  • B. Premier pas en TypesScript

🧐 I - Présentations

💻 A. Qu'est-ce que Typescript ?

• TypeScript est un sur-ensemble de JavaScript : tout code JS est valide en TS.
• Il apporte un typage statique qui permet de détecter des erreurs avant l'éxecution.
• Le code TS est compilé en JS car les navigateurs n'éxecutent pas le TS.
• Le typage permet meilleure autocomplétion (grâce aux typage), refactorisation plus sûre (Si on modifie une fonction à un endroit ça affiche l'erreur à tous les endroits où cette fonction était utilisée).
• D'autres frameworks JS connus utilisent du TypeScript.
• Objectif de TS : Ecrire du JS en plus fiable, plus structuré et plus maintenable.

💻 B. Qu'est-ce que NodeJS ?

• NodeJS est un environnement d'éxecution JS hors navigateur.
• Permet d'utiliser le JS pour du Backend.
• NodeJS fonctionne avec un modèle asynchrone pour traiter de nombreuses requêtes en simultanées.
• Node permet de créer : API, bots, microservices, applications en temps réel, outils frontend, serveurs web etc.

‼️ II - Prérequis

📩 A. Installer Node, npm et npx

• NPM et NPX sont automatiquement ajoutés à l'installation de nodeJS

Vérifier la version de node, npm et npx:

node -v

npm -v

npx -v

⚙️ III - Setup du projet

🗃️ A. Gestion des dépendances

• Ouvrir/Créer un dossier de projet.

npm init -y

↳ Crée le fichier package.json qui va gérer les dépendances du projet (dont Typescript)

npm : Node Package Manager
. init : initialiser un nouveau projet node
. -y : Yes → Accepter toutes les valeurs par défaut.

⚠️ Commande à faire avant d'installer Typescript pour qu'il apparait bien dans les dépendances du projet.

📩 B. Installation de Typescript

Installer Typescript (latest) via npm :

❓Installation local conseillée pour éviter les conflits de version avec d'autres projets.

npm install -D typescript

npm install -g typescript

-D : Installer localement dans le projet.
-g : Installer globalement.

Pour Désinstaller Typescript :

npm uninstall -g typescript

↳ Désinstallation globale

Verifier la version de Typescript :

Pour installation locale :

npx tsc --version

↳ npx → Node Package eXecuter

Pour installation global :

tsc --version

TSC → TypeScript Compiler.

Créer le fichier de config Typescript :

npx tsc --init

↳ Crée un fichier tsconfig.json qui permettra de compiler les fichiers .ts en fichier .js.
↳ Si une erreurs "no inputs were found in config file" apparait c'est normal pour l'instant.

🔧 IV - Gestion du projet

🌳 A. Structure et Arborescence du projet

Créer les répertoires src/ et dist/ :

mkdir src

↳ Ce dossier contiendra tous nos fichiers .ts

mkdir dist

↳ Ce dossier contiendra tous les fichiers .ts compilés en .js

Décommenter les lignes suivantes dans le fichier tsconfig.json :

"rootDir": "./src",
"outDir": "./dist",

↳ Cette configuration est optionnelle mais permet de séparer les fichiers Typescript .ts et les fichiers compilés .js et avoir un projet plus structuré.

Ce a quoi le répertoire du projet dois ressembler :

mon-projet/
├─ dist/
├─ node_modules/
├─ src/
│
├─ package-lock.json
├─ package.json
├─ README.md
└─ tsconfig.json

🌱 B. Premier pas en TypesScript

Créons notre premier fichier Typescript :

• Créez un fichier .ts (Exemple HelloWorld.ts) dans le dossier src/.
• Mettez votre code a l'intérieur :

console.log("Hello World !");

• Sauvegardez le fichier.

Comment compiler le fichier Typescript :

npx tsc

↳ Compile les fichiers .ts du répertoire src/ en .js et les envoies dans le répertoire dist/.

❓ Plusieurs fichiers sont apparus en plus du .js :

• [Fichier].d.ts → Contient les types exportés des variables du script .ts original.
• [Fichier].d.ts.map → Relie les fichiers .d.ts avec les fichier .ts original.
• [Fichier].js.map → Relie le code .js généré au code .ts original. Quand il y a une erreur elle apparait dans le .ts et non dans le .js .

Ces fichiers ( .d.ts et .d.ts.map ) ne sont pas obligatoires ils sont utiles si quelqu'un utilise notre code JavaScript compilé dans un projet externe, et servent aussi à l'autocomplétion IntelliSense et la vérification des types dans l'éditeur.

Il est quand même conseillé de garder au moins le fichier .js.map pour pouvoir débugger plus facilement le code.

Comment désactiver la créations de ces fichiers :

• Vous pouvez modifier ces lignes dans le fichier tsconfig.json

"sourceMap": true, // .js.map
"declaration": true, // .d.ts
"declarationMap": true, // .d.ts.map

Comment executer notre code dans le terminal :

node dist/fichier.js

↳ Execute le fichier JS dans le terminal.