18
Guilherme Oennin @goennin http://goenning.ne Nov/20 TypeScript + React

Introdução ao TypeScript + React

Embed Size (px)

Citation preview

Page 1: Introdução ao TypeScript + React

Guilherme Oenning@goenning

http://goenning.netNov/2016

TypeScript+ React

Page 2: Introdução ao TypeScript + React

O que é o TypeScript?

Page 3: Introdução ao TypeScript + React

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

Código JavaScript é TypeScript

+ TypeScript.

Page 5: Introdução ao TypeScript + React

TypeScript compila para JavaScript

Em tempo de execução.

Page 6: Introdução ao TypeScript + React

Código TypeScript é seguro

Em tempo de compilação

Page 7: Introdução ao TypeScript + React

TypeScript é flexível

Page 8: Introdução ao TypeScript + React

TypeScript é seu primeiro teste unitário

Page 9: Introdução ao TypeScript + React

TypeScript + IDE

Page 10: Introdução ao TypeScript + React

JavaScript de hoje: Promises + Callbacks

Page 11: Introdução ao TypeScript + React

JavaScript do Futuro...

Page 12: Introdução ao TypeScript + React

JavaScript do Futuro... disponível hoje

Page 13: Introdução ao TypeScript + React

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://www.typescriptlang.org/play/

Page 15: Introdução ao TypeScript + React

+

Page 16: Introdução ao TypeScript + React

Components tipados

Page 17: Introdução ao TypeScript + React

TypeScript é React-friendly

Page 18: Introdução ao TypeScript + React

<Demonstracao />https://github.com/goenning/code-samples/tree/master/typescript-react