Introdução ao TypeScript + React
-
Upload
guilherme-oenning -
Category
Technology
-
view
94 -
download
0
Transcript of Introdução ao TypeScript + React
![Page 1: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/1.jpg)
Guilherme Oenning@goenning
http://goenning.netNov/2016
TypeScript+ React
![Page 2: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/2.jpg)
O que é o TypeScript?
![Page 3: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/3.jpg)
O que é o TypeScript?TypeScript
TypesDecorators
Async / Await
ES6Classes
Template String, Arrows, Let + Const...
ES5
ES3
• JavaScript that scales...• Superset de JavaScript;• ”Compila” para ES3, ES5 ou ES6• Suporte à recursos ES.Next• Introdução de tipagem ao
JavaScript;
![Page 4: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/4.jpg)
Código JavaScript é TypeScript
+ TypeScript.
![Page 5: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/5.jpg)
TypeScript compila para JavaScript
Em tempo de execução.
![Page 6: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/6.jpg)
Código TypeScript é seguro
Em tempo de compilação
![Page 7: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/7.jpg)
TypeScript é flexível
![Page 8: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/8.jpg)
TypeScript é seu primeiro teste unitário
![Page 9: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/9.jpg)
TypeScript + IDE
![Page 10: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/10.jpg)
JavaScript de hoje: Promises + Callbacks
![Page 11: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/11.jpg)
JavaScript do Futuro...
![Page 12: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/12.jpg)
JavaScript do Futuro... disponível hoje
![Page 13: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/13.jpg)
Mas nem tudo é perfeito• Não achou as definições de tipos
para a biblioteca X?• Escreva você mesmo e compartilhe
com a comunidade (ou não) • https://github.com/
DefinitelyTyped/DefinitelyTyped/
$ npm install react @types/react
![Page 14: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/14.jpg)
https://www.typescriptlang.org/play/
![Page 15: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/15.jpg)
+
![Page 16: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/16.jpg)
Components tipados
![Page 17: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/17.jpg)
TypeScript é React-friendly
![Page 18: Introdução ao TypeScript + React](https://reader034.fdocuments.in/reader034/viewer/2022050812/587699941a28abab2f8b7a57/html5/thumbnails/18.jpg)
<Demonstracao />https://github.com/goenning/code-samples/tree/master/typescript-react