présentation effectuée le 24 octobre 2018 à Montréal pour un événement interne chez le client

1. Introduction à
Flow

2. Pourquoi utiliser du
typage avec
Javascript??
• Parce que Javascript…
• Le typage nous permet
• Détection plus tôt des
erreurs
• Améliorer la lisibilité du
code
• Améliorer la qualité du
code

3. Qu’est ce que Flow type ?
• Static type checker
Un outil d'analyse statique de JS et non un langage (tel que Typescript)
• Inférence de types
 Comprendre comme un grand quel doit être le type associé à la déclaration

4. Comment
typer son
code
On ajoute // @flow à
chaque fichier que l’on
souhaite ajouter du typage
On peut ajouter du type à
nos éléments ou utiliser
l’inférence.

5. Primitives

6. Literal

7. Fonctions

8. Fonctions

9. Functions avec optional

10. Function avec multiple arguments

11. Function Types
Flow nous informe d’erreurs faciles de JS

12. Maybe types
• let foo: ?string; // peut-être une string, null ou undefined

13. Objets et classes

14. Interface types

15. State

16. Import / export

17. Flow-typed
Repo et outil de types des librairies tierces

18. Tools
• React
• supporté directement et permet la suppression des propTypes
• Create-React-App (CRA) supporte Flow par défaut
• IDE
• Majors: VSCODE(en workspace)
• Nuclide (Atom)

19. Conclusion
Juste du typage dans JS .

20. Sources
• https://flow.org/en/
• https://fr.slideshare.net/andrewrota/why-statictypecheckingisbetter
• https://putaindecode.io/fr/articles/js/flow/
• https://putaindecode.io/fr/articles/js/flow/advanced-part-1/
• https://speakerdeck.com/yayoc/practical-flow-type?slide=47
• Comparaison
• https://medium.com/the-web-tub/comparing-flow-with-typescript-6a8ff7fd4cbb
• https://djcordhose.github.io/flow-vs-typescript/2016_hhjs.html#/26
• Typescript
• http://pierreterrat.com/pourquoi-typescript/