Exercice 04 - Utilisation de TypeScript

Table des matières

Vous avez compris le pourquoi et la raison d'être de TypeScript, maintenant il est temps de le mettre en pratique avec un exercice pratique!

Exercice seul
Réaliser durant le cours
Durée approximative le reste du cours
Remettre le tout sur Léa dans Exercice 04 pour le prochain cours!
- IMPORTANT: Supprimer le dossier "node_modules" lors de la remise!

Pour débuter l'exercice:

Dans le terminal, on installe les dépendances et on lance le serveur:

npm install
npm run dev

En utilisant le code de l'exercice 02, vous avez trois tâches

Vous devez intégrer Typescript, donc vous avez à transférer du code de main.js à main.ts!
- Laissez le import './style.css'
- Effacer le reste avant de copier le main.js
Vous copiez le css de style.css dans le nouveau style.css tel quel
Pour le index.html, il faut vraiment comprendre celui de Typescript avant de coller ce qu'il y a dans le body!
- N'oubliez pas les deux fichiers Bootstrap!
- N'oubliez pas: <html lang="fr" data-bs-theme="dark"> sinon le texte sera noir

Maintenant le cœur de l'exercice! Vous devez convertir le code JavaScript pour répondre au maximum aux normes de TypeScript!

Normalement, vous devriez avoir plein d'erreur dans votre fichier main.ts!
Les constantes d'éléments HTML doivent être typées! (HTMLElement)
- HTMLInputElement, HTMLFormElement, HTMLElement, etc.
- Pour trouver le bon type allez voir la documentation HTML en bas de chaque page il y a le type au niveau du DOM
- Exemple:
```
const message: HTMLFormElement | null = document.querySelector(
    "#message"
) as HTMLFormElement;
```
Les fonctions devront avoir des retours typés
Les fonctions devront avoir des paramètres typés
- Vous aurez parfois des erreurs à cause que la variable ne peut être null, pour corriger cela mettez des points d'exclamation:
```
    stats!.textContent = `Tentatives: ${total} | Autorisées: ${allowedCount} | Âge moyen: ${avgAge}`;
```
Les variables devront être typées (OBLIGATOIRE pour la compréhension)
- Les tableaux doivent aussi être typés!
Plus aucunes erreurs Typescript doivent être présentes!
EXPERT: Trouvez le moyen de séparer les définitions de constantes d'éléments HTML, de messages d'erreurs, etc., dans un ou des fichiers séparés!
- Regardez comment est intégré counter.ts! (import { setupCounter } from './counter.ts')
- Aller lire la documentation sur les modules
FINALEMENT, faites un npm run build pour voir si votre projet se construit bien!

Intégrez progressivement : Commencez par convertir de petits fichiers ou modules pour vous familiariser avec TypeScript.

Types de base : Familiarisez-vous avec les types primitifs (string, number, boolean, etc.).
Types avancés : Apprenez à utiliser les interfaces, les enums, les tuples, et les unions/intersections de types.

Variables et fonctions : Ajoutez des annotations de type aux variables et aux signatures de fonction pour améliorer la vérification des types.
Paramètres et retours de fonction : Spécifiez les types pour tous les paramètres et retours de fonction.

Évitez any : L'utilisation de any réduit la sécurité de type offerte par TypeScript.
Refactorisez les any : Remplacez progressivement any par des types plus précis lors de la révision de votre code.

Modules ES6 : Assurez-vous d'utiliser import et export pour la gestion des modules.
Déclarations de types pour bibliothèques tierces : Installez les paquets de déclarations de type pour les bibliothèques JavaScript tierces via DefinitelyTyped.

Outils de linting et de formatage : Utilisez ESLint avec des plugins TypeScript et Prettier.
Ressources : La documentation officielle de TypeScript, les forums, les blogues, et les tutoriels vidéo sont d'excellentes ressources.

Patterns de conception : Réévaluez l'utilisation des patterns dans votre application avec les capacités de TypeScript.

Remettre le tout sur Léa dans Exercice 04 pour le prochain cours!
- IMPORTANT: Supprimer le dossier node_modules