React with super powers using TypeScript

ReactJS Milano meetup 1.0 slides.
This talk is about writing React apps using TypeScript, highlighting the advantages comparing to a plain JS approach.

Transcript

1. React with super powers using TypeScript Stefano Armenes ReactJS Milano, 3 Aprile 2018
2. Jaga Santagostino Stefano Armenes Ciao! 0xste kandros5591
3. La genesi…
4. Javascript
5. Javascript
6. Javascript
7. Javascript
8. Perché? -> Passaggio da un linguaggio compilato e static typed a JS ☹ -> Errori a runtime che potrebbero essere evitati -> Scrivere software sforzandosi fin da subito a “dichiarare” il modello dati -> Facilità di lettura da parte di altre persone -> Auto-documentazione del codice
9. Typed Not typed
10. TypeScript
11. Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined
12. Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Enums
13. Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Interfaces, type aliases -> Enums
14. Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Interfaces, type aliases -> Enums -> Generics
15. Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Union types, nullable types -> Interfaces, type aliases -> Enums -> Generics
16. Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Union types, nullable types -> Type inference -> Interfaces, type aliases -> Enums -> Generics
17. Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Type guards -> Union types, nullable types -> Type inference -> Interfaces, type aliases -> Enums -> Generics
18. Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Type guards -> Union types, nullable types -> Type inference -> Control flow based type analysis -> Interfaces, type aliases -> Enums -> Generics
19. DEMO
20. React
21. React - Component
22. React - SFC
23. React - setState
24. yarn add -D @types/${lib-name} Typings everywhere Libreria scritta in JS? Nessun problema (o quasi) …ma spesso integrati nella libreria stessa
25. Ok ma… come inizio? https://basarat.gitbooks.io/typescript/ https://egghead.io/courses/use-typescript-to-develop-react-applications https://egghead.io/courses/advanced-static-types-in-typescript yarn global add create-react-app create-react-app my-app "--scripts-version=react-scripts-ts cd my-app/ yarn start http://www.typescriptlang.org/docs/home.html
26. GRAZIE