Exercice 04 - Utilisation de TypeScript

Table des matières

Mise en situation

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!

Modalités

À faire (étapes)

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

  1. Amélioration du code existant
  2. Intégration du code existant dans un projet TypeScript
  3. Conversion du code JavaScript en code TypeScript

Amélioration du code existant

Vous pouvez bien sûr prendre votre code de votre exercice pour améliorer celui-ci, l'idée est de faire de l'amélioration de l'existant!

Voici quelques suggestions pour améliorer le code existant :

Pour l'exercice, vous devez améliorer au moins 4 éléments distincts, selon votre avis personnel.

Intégration du code existant dans un projet TypeScript

  1. Le code JavaScript de app.js de l'exercice 02 doit être transféré en bas dans index.ts de l'exercice 04
  2. Supprimer le code JavaScript superflu du fichier index.ts de l'exercice 04:
    setupCounter(document.querySelector('#counter')!)
  3. Le code HTML de l'entête et du footer du fichier index.html de l'exercice 02 doit être transféré dans index.html de l'exercice 04
    • Vous pouvez entourer la div#app par une balise main du fichier index.html de l'exercice 04
    • Mettez à jour le title de votre site dans index.html de l'exercice 04 pour: Guide du joueur - Créer son perso | Dongeons & Dragons 5ième édition
  4. Le CSS de l'exercice 02 doit être transférer et remplacer celui présent dans style.css de l'exercice 04
  5. Penser à l'endroit ou mettre le code HTML du formulaire (indice: index.ts) c'est ce html qui sera injecté dans la div#app!
    document.querySelector('#app')!.innerHTML = ``
  6. Intégrer l'image de l'exercice 02 et faire le ménage des images superflues de l'exercice 04
    Exemple: 
    <img class="img-fluid d-none d-lg-block" src="/src/assets/personnage.jpg"
    alt="Bannière qui affiche différents personnage de DnD">

    Le code compilé ressemblera à ça

      <img class="img-fluid d-none d-lg-block" src="/assets/personnage-kRMnL-B2.jpg"
    alt="Bannière qui affiche différents personnage de DnD">
  7. Intégrer le JavaScript de Bootstrap ainsi que le fichier CSS de Bootstrap.
    • Il y a deux méthodes pour le faire!
      Exemple possible: 
      import '../css/style.css'
import '../css/bootstrap.min.css'
import '../js/bootstrap.bundle.min.js'
  8. Votre projet devrait fonctionner à partir de ce moment! (npm run dev)
    • À noter: votre fichier index.ts va contenir des erreurs MAIS tout devrais s'afficher dans le navigateur!

Conversion du code JavaScript en code TypeScript

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

Quelques conseils

  1. Commencez petit

    • Intégrez progressivement : Commencez par convertir de petits fichiers ou modules pour vous familiariser avec TypeScript.
    • Utilisez allowJs : activez l'option allowJs dans votre fichier tsconfig.json pour permettre à TypeScript de compiler les fichiers JavaScript, facilitant ainsi la migration fichier par fichier.

  2. Apprenez les bases de 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.

  3. Annoter avec des types explicites

    • 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.

  4. Utilisez any avec prudence

    • É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.

  5. Gestion des modules

    • 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.

  6. Profitez des outils et de la communauté

    • 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.

  7. Revoyez votre architecture

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

Remise finale

Solution