Tweet
Tweet

Slide 1

Slide 1 text

React with super powers using TypeScript Stefano Armenes ReactJS Milano, 3 Aprile 2018

Slide 2

Slide 2 text

Jaga Santagostino Stefano Armenes Ciao! 0xste kandros5591

Slide 3

Slide 3 text

La genesi…

Slide 4

Slide 4 text

Javascript

Slide 5

Slide 5 text

Javascript

Slide 6

Slide 6 text

Javascript

Slide 7

Slide 7 text

Javascript

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Typed Not typed

Slide 10

Slide 10 text

TypeScript

Slide 11

Slide 11 text

Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined

Slide 12

Slide 12 text

Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Enums

Slide 13

Slide 13 text

Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Interfaces, type aliases -> Enums

Slide 14

Slide 14 text

Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Interfaces, type aliases -> Enums -> Generics

Slide 15

Slide 15 text

Typescript -> Basic types boolean, number, string, array, tuple, enum, any, void, never, null, undefined -> Union types, nullable types -> Interfaces, type aliases -> Enums -> Generics

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

DEMO

Slide 20

Slide 20 text

React

Slide 21

Slide 21 text

React - Component

Slide 22

Slide 22 text

React - SFC

Slide 23

Slide 23 text

React - setState

Slide 24

Slide 24 text

yarn add -D @types/${lib-name} Typings everywhere Libreria scritta in JS? Nessun problema (o quasi) …ma spesso integrati nella libreria stessa

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

GRAZIE