Cours 03 - Présentation de TypeScript

Objectifs

• Connaître les commande de lancement de scripts avec NPM
• Mettre en place un projet avec TypeScript
• Connaître l'infrastructure et l'utilité de TypeScript

Déroulement

• Introduction au cours
  • Solution - Exercice 02
• Présentation de TypeScript
• Atelier 03 - Lancer un projet TypeScript
• Conclusion

Présentation de TypeScript

TypeScript???

• Quoi? TypeScript est un langage de programmation développé par Microsoft.
  • Il s'agit d'un sur-ensemble de JavaScript, ce qui signifie que tout code JavaScript est également du code TypeScript valide.
  • La principale caractéristique de TypeScript est qu'il introduit un système de typage statique optionnel.
• À qui et comment? Ce système permet aux développeurs de spécifier les types de variables, de fonctions, et d'objets, facilitant ainsi le développement de code plus sûr et plus facile à comprendre et à maintenir.
• Comment et où? TypeScript est transpilé en JavaScript, ce qui permet de l'exécuter sur n'importe quel navigateur ou environnement JavaScript.
• Pourquoi et quand? Il est particulièrement utilisé dans les projets de grande envergure pour sa capacité à améliorer la qualité du code et à réduire les erreurs potentielles durant le développement.

En résumé

• Couche par dessus JavaScript qui nécessite une infrastructure de compilation
• Analogie de l'enfant:
  • JavaScript: enfant indiscipliné
  • TypeScript: enfant sage ;)

Bénéfices:

• Typage statique
  • let number: number = 10 VS let number = 10
  • Typage dynamique = PHP, JavaScript
• Complétion de code
• Re-factorisation de code
• Notation "Shorthand" (plus courte)
• Autres fonctionnalités...
  • Parfois ajouté à JavaScript directement par la suite!

Désavantages:

• Compilation (transpilation)
• Demande de la discipline

Liens utiles

• Les commandes de navigation Bash
• NPM
• Vite
• TypeScript

Atelier 03 - Lancer un projet TypeScript

Prérequis

Faire les lectures suivantes :

• Technologie de déploiement: vite : Vite.

Il faut avoir node.js opérationnel pour faire un npm
Voir la documentation du cours

Démonstration vidéo

Écouter la vidéo qui présente les étapes à faire de l'atelier 03

Installation

• Aller dans votre répertoire du cours et créer un répertoire nommé atel03
• Aller dans ce répertoire et ouvrir un terminal à cet endroit.

Pour installer un projet avec vite:

• npm 7+, extra double-dash is needed:
• npm [action] [techno]@[version] [nom-projet] -- --[gabarit] [nom-gabarit]

  npm create vite@latest vite-website -- --template vanilla-ts

Pour aller dans le terminal dans le répertoire du projet:

• cd [nom-projet]

  cd vite-website

Pour installer les dépendances du projet, il faut ensuite faire un:

npm install

Utilisation

Visite du fichier package.json:

• version: version de votre projet
• scripts: les scripts disponibles avec un npm run [scripts]
• devDependencies: les dépendances de dev du projet (vite et TypeScript)

Lancer le projet:

npm run dev

• Network: use --host to expose => permet de voir le résultat sur le réseau LAN
• L'adresse est cliquable aller voir le résultat!

Visite des fichiers du projet

• public: ressources publiques, tout ce qui est là sera copié 1:1 dans le répertoire dist à la racine
• src: code source du projet
  • main.ts: fichier de dev typescript (remarquer l'extension!)
• À venir dist: fichier distribué en prod!
• node_modules: dépendances du projet à effacer en prod!
• index.html: page d'accueil
  • remarquer l'inclusion de fichier .ts dans le fichier!
• tsconfig.json
  • fichier de config de TypeScript
  • TypeScript est compilé!!

Pour bâtir un projet TypeScript

• Fermer le terminal qui roule le site en dev
• Ouvrir un nouveau terminal dans le dossier vite-website
• Faire la commande:

  npm run build

• Le projet est "build" dans le dossier dist!
• Ouvrir le fichier index.html du dossier dist
• Le projet sait à quel endroit vont les fichiers, tout se passe dans main.ts!
• MAGIE!

Ouvrir main.ts pour voir les assets et les références générées dynamiquement

• import typescriptLogo from './typescript.svg'
  • => va importer la ressource dans notre projet

    <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />

  • => va permettre de faire son appel
• Au final dans notre HTML compilé ça ressemblera à ça:

  <img src="/src/typescript.svg" class="logo vanilla" alt="TypeScript logo">

Bonnes pratiques de gestion de fichiers

Tous nos fichiers sont dans le dossier src! C'est donc un peu dur de se retrouver...

• On va créer un dossier assets et un dossier scripts
  • Mettre nos images dans assets
  • Mettre nos scripts (.ts) dans scripts
• Renommer main.ts en index.ts
• Changer les références dans index.ts
  • import '../style.css'
  • import typescriptLogo from '../assets/typescript.svg'
  • Pourquoi ../ ??
• Changer les références dans index.html

  <script type="module" src="/src/scripts/index.ts"></script>

Pour tester si tout est ok, lancer le projet:

npm run dev

Remise

Aucune remise pour cet atelier