Skip to content
Snippets Groups Projects
Commit 9989f31b authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

maj typage

parent d8449cc7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 40 additions and 27 deletions
E-typage.md
+ 40
− 27
View file @ 9989f31b
# TP 2 - POO - modules - typage <!-- omit in toc -->
# TP 2 : E. typage <!-- omit in toc -->
## Sommaire <!-- omit in toc -->
- [D. Typage](#d-typage)
- [D.1 Installation et configuration](#d1-installation-et-configuration)
- [D.2. Premiers tests](#d2-premiers-tests)
- [D.3. intégration avec Babel](#d3-intégration-avec-babel)
- [D.4. Intégration dans Visual Studio Code](#d4-intégration-dans-visual-studio-code)
- [D.5. Typer notre code](#d5-typer-notre-code)
## D. Typage
- [E.1 Installation et configuration](#e1-installation-et-configuration)
- [E.2. Premiers tests](#e2-premiers-tests)
- [E.3. intégration avec Babel](#e3-intégration-avec-babel)
- [E.4. Intégration dans VSCodium](#e4-intégration-dans-vscodium)
- [E.5. Typer notre code](#e5-typer-notre-code)
Comme vu en cours, il existe plusieurs solutions pour ajouter du typage statique dans notre code JS.
Celle que nous allons employer aujourd'hui se base sur [Flow](https://flow.org/).
### D.1 Installation et configuration
## E.1 Installation et configuration
1. **Installez Flow (attention, cette commande est bien à lancer dans votre dossier de travail, là où se trouvent les fichiers index.html, package.json, .babelrc, etc.) :**
```bash
......@@ -24,9 +22,18 @@ Celle que nous allons employer aujourd'hui se base sur [Flow](https://flow.org/)
```bash
./node_modules/.bin/flow init
```
5. **Lancez ensuite la vérification de vos fichiers en lançant :**
5. **Ajoutez un script pour lancer flow dans le fichier `package.json`:**
```json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=production",
"watch": "webpack --mode=development --watch",
"flow": "flow"
},
```
lancez ensuite dans un terminal intégré à VSCodium :
```bash
./node_modules/.bin/flow
npm run flow
```
Vous devriez avoir comme résultat final :
```bash
......@@ -34,13 +41,13 @@ Celle que nous allons employer aujourd'hui se base sur [Flow](https://flow.org/)
```
En effet, pour le moment nos fichiers ne contiennent aucune information de typage !
### D.2. Premiers tests
## E.2. Premiers tests
1. **Dans le fichier `js/main.js` ajoutez le code suivant (au début du fichier):**
```js
// @flow
const i:number = '12';
```
2. **Relancez la commande `./node_modules/.bin/flow`** (*pensez à stopper le `watch`précédent s'il tournait toujours <kbd>CTRL</kbd>+<kbd>C</kbd>)*. Cette fois plusieurs erreurs doivent apparaître dans votre terminal :
2. **Relancez la commande `npm run flow`** (*pensez à stopper le `watch`précédent s'il tournait toujours <kbd>CTRL</kbd>+<kbd>C</kbd>)*. Cette fois plusieurs erreurs doivent apparaître dans votre terminal :
<br><a href="images/flow-error.jpg"><img src="images/flow-error.jpg" width="80%"></a>
On a en réalité 3 erreurs :
......@@ -49,7 +56,7 @@ Celle que nous allons employer aujourd'hui se base sur [Flow](https://flow.org/)
```bash
Cannot assign title.render() to document.querySelector(...).innerHTML because property innerHTML is missing in null [1].
```
Ce que nous apprend cette ligne, c'est que la méthode `document.querySelector()` peut dans certains cas nous retourner une valeur vide (`null`). C'est en effet le cas par exemple si la page html ne contient pas de balise avec la classe CSS 'pageTitle', ou si le script s'exécute avant que la page ne soit complètement chargée.
Ce que nous apprend cette ligne, c'est que la méthode `document.querySelector()` peut dans certains cas nous retourner une valeur vide (`null`). C'est en effet le cas si par exemple la page html ne contient pas de balise avec la classe CSS 'pageTitle', ou si le script s'exécute avant que la page ne soit complètement chargée.
Si on laisse notre code tel quel, alors on s'expose à des bugs car dans l'hypothèse où querySelector retournerait `null`, la ligne
```js
......@@ -69,10 +76,10 @@ Celle que nous allons employer aujourd'hui se base sur [Flow](https://flow.org/)
Faites de même pour la homePage et relancez flow, vous n'avez en principe plus d'erreur !
### D.3. intégration avec Babel
## E.3. intégration avec Babel
Si vous tentez de recompiler votre JS une fois les informations de typage ajoutées, vous verrez que webpack et babel n'arriveront plus à compiler votre code.
En effet, la syntaxe flow ne fait pas partie de la spec officielle d'EcmaScript.
En effet, la syntaxe flow ne fait pas partie de la spec officielle d'ECMAScript.
On peut cependant assez facilement rendre tout ça compatible :
1. **Installez le preset babel flow** (qui va permettre à babel de comprendre les instructions de typage de flow) :
......@@ -91,14 +98,21 @@ On peut cependant assez facilement rendre tout ça compatible :
```
3. **Relancez la compilation à l'aide de la commande `npm run build` ou `npm run watch`** (*pensez à stopper le `watch`précédent s'il tournait toujours <kbd>CTRL</kbd>+<kbd>C</kbd>)*, vérifiez que tout compile correctement et que l'affichage dans le navigateur est inchangé.
### D.4. Intégration dans Visual Studio Code
Pour permettre à Visual Studio Code de comprendre les informations de typage flow, installez l'extension : https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode
## E.4. Intégration dans VSCodium
Pour permettre à VSCodium de comprendre les informations de typage flow, installez l'extension : https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode
1. Activez l'extension une fois installée en relançant vscode
2. Ouvrez les préférences de vscode (<kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> &gt; Préférences : Ouvrir les paramètres <u>d'espace de travail</u>)
3. recherchez la clé "Javascript › Validate: Enable" et décochez la case pour désactiver le système de vérification du JS intégré à VSCode
4. recherchez la clé "Flow : Use NPMPackaged Flow" et cochez la case pour permettre à l'extension d'utiliser la version de flow qui est installée dans le projet.
5. Vérifiez que le dossier que vous avez ouvert dans VSCode correspond bien au dossier "demarrage" : à la racine du dossier, dans l'explorateur de VSCode, vous devez trouver le dossier `node_modules`
1. Activez l'extension une fois installée en relançant VSCodium
2. Modifiez le fichier `.vscode/settings.json` comme ceci :
```json
{
"javascript.validate.enable": false,
"flow.useNPMPackagedFlow": true,
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
```
Désormais si vos fichiers comportent l'annotation `// @flow` alors le plugin va afficher les éventuelles erreurs de typage !
......@@ -107,8 +121,8 @@ Désormais si vos fichiers comportent l'annotation `// @flow` alors le plugin va
***Ceci étant dit le travail n'est pas terminé :***
### D.5. Typer notre code
**Maintenant que flow est installé, ajoutez les informations de typage aux différents fichiers de notre application (main, Component, Img, PizzaThumbnail, HomePage):**
## E.5. Typer notre code
**Maintenant que flow est installé, ajoutez les informations de typage aux différents fichiers de notre application (main, Component, Img, PizzaThumbnail, HomePage, etc.):**
- typer toutes les variables (let, const)
- typer les propriétés d'instances
- typer les paramètres de méthodes et de fonctions
......@@ -116,5 +130,4 @@ Désormais si vos fichiers comportent l'annotation `// @flow` alors le plugin va
***NB:** Ne pas oublier d'ajouter le commentaire `// @flow` en entête de chaque fichier modifié*
# Cette fois c'est terminé, bravo ! <!-- omit in toc -->
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment