Introduction à Typescript

Technologie web 3

Johan Girod

Petit rappel

Javascript est un langage interprété...

...et sans typage statique

💥 Cela pose problème pour la maintenabilité et la robustesse des bases de codes.

Typescript

typescriptlang.org

Langage de programmation open-source développé par Microsoft
Sur-ensemble de Javascript
Permet de vérifier que le typage est bon
Est compilé en Javascript

Typescript dans un projet

Syntaxe : déclaration

Types de base : number, string, boolean, void, undefined, null et void

Syntaxe : type alias et union

Syntaxe : classes

Il est possible de préciser des interfaces

Tableau et tuple

Objets

Dictionnaire

Les dictionnaires sont une structure de donnée qui associe une clé à une valeur

Syntaxe - autres notions

À vous de jouer !

TP 1 - Ajouter des types à un projet existant

Dans ce TP, nous allons ajouter des types à un projet existant pour améliorer la lisibilité du code et éviter des erreurs.

Mise en place

Clonez le dépôt

  git clone https://sources.univ-jfc.fr/techno-web-3/tp-1.git
  cd tp-1

Lancer
```
  npm install
```
Ouvrez vscode à la racine du projet
```
  code .
```
Ouvrez le fichier exercice-1.js. Normalement, votre éditeur doit signaler que des types sont manquants en souligant en rouge les endroits à compléter.
Ajouter les types pour corriger les erreurs.

TP 2 - Memory

Partie 1 - Initialisation du projet from scratch

Créez un nouveau projet dans un nouveau répertoire nommé memory
```
   npm init -y
```
Installez typescript comme dépendance du projet
```
   npm install -D typescript
```

Créez un fichier tsconfig.json à la racine du projet

{
	"compilerOptions": {
		"target": "ES6",
		"module": "ES6",
		"outDir": "./dist",
		"rootDir": "./src",
		"strict": true
	}
}

`tsconfig.json`

Ce fichier de configuration permet de définir les options de compilation de typescript pour le projet courant.

target : version de javascript cible
module : on précise le système de module utilisé
outDir : répertoire de sortie où seront placés les fichiers js compilés
rootDir : répertoire source
strict : active une verification plus stricte

Créez un répertoire src et un fichier index.ts
```
   mkdir src
   touch src/index.ts
```
Le fichier index.ts contiendra le code de l’application. Pour l’instant, vous pouvez ajouter un simple console.log('Hello World') pour tester la compilation.

Créer un fichier index.html à la racine du projet

<!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>Memory</title>
	</head>
</html>

Ajoutez un script dans le fichier package.json pour lancer le compilateur typescript tsc. Ce script sera exécuté avec la commande npm run build.

Corrigé
Lancez la compilation avec la commande npm run build. Vous devriez voir un fichier index.js généré dans le répertoire dist. Ouvrez-le. Que constatez-vous ?
Ajoutez une balise script dans le HTML pour charger le fichier index.js généré par typescript (dans le répertoire dist).
Ouvrez le fichier index.html dans un navigateur pour vérifier que le message Hello World s’affiche dans la console.

Partie 2 - Création d’un jeu de memory simple

Compiler automatiquement

Pour éviter de lancer la commande tsc à chaque modification, vous pouvez créer un script dev qui surveille les modifications des fichiers et recompile automatiquement le projet.

...
"scripts": {
  "dev": "tsc --watch"
}

Créer un type Carte pour une carte de memory. Une carte possède un symbole et un état (retournée ou non). Les symboles possibles sont les emojis suivantes : 🍎, 🍌, 🍒, 🍓, 🍇, 🍉, 🍊, 🍍

Corrigé
Créer une fonction creerJeu qui retourne un tableau de cartes mélangées. Ce tablau doit contenir 2 cartes de chaque symbole, soit 16 cartes au total.

Corrigé
Créer une fonction afficherCarte qui prend en paramètre un tableau de cartes et l’affiche dans l’interface du navigateur, sous forme d’un tableau de 4 lignes et 4 colonnes. Les cartes retournées doivent afficher leur symbole, les cartes cachées doivent afficher un espace.

Tester que votre fonction affiche correctement les cartes en appelant la fonction afficherCarte(jeuEnCours). Puis, changer passer l’état de quelques cartes de « caché » à « visible » et vérifier que l’affichage est correct.

Rappel
- Pour **créer un élément HTML**, on utilise la méthode [`document.createElement('div')`](https://developer.mozilla.org/fr/docs/Web/API/Document/createElement) - Pour **ajouter un élément** à un autre, on utilise la méthode [`myDomNode.appendChild(myElement)`](https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild) - Pour **ajouter une classe** à un élément, on utilise la propriété [`classList.add()`](https://developer.mozilla.org/fr/docs/Web/API/Element/classList) - Pour **récupérer un élément du DOM**, on utilise la méthode [`document.querySelector(mySelector)`](https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector) - Pour **supprimer un élément**, on utilise la méthode [`remove()`](https://developer.mozilla.org/fr/docs/Web/API/ChildNode/remove)

Proposition de CSS

À ajouter dans un fichier style.css à la racine du projet, puis à inclure dans le fichier index.html avec une balise link.
```
.carte-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	width: fit-content;
	gap: 5px;
}
.carte {
	width: 50px;
	height: 50px;
	border: 1px solid black;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	border-radius: 5px;
}
```
Corrigé
La suite au TP suivant.