React.js com TypeScript

Tornando seus projetos React.js mais seguros, previsíveis e escalonáveis com TypeScript.

Transcript

1. Tornando seus projetos React.js mais seguros, previsíveis e escalonáveis com TypeScript.
2. • Uma biblioteca de para criar e componentes de UI e manipular seus estados. • Foi criada pelo Facebook em 2013 para facilitar a construção de interfaces e mudanças de estados. O que é React.js?
3. • Um superset restrito para JavaScript que adiciona tipos estáticos e outras abstrações (OOP). • Foi criado pela Microsoft em 2012 para escalar aplicações da MS e dos parceiros e mantida open source. O que é TypeScript?
4. Por que usar React com TypeScript?
5. Por que usar checagem estática de tipos?
6. • Tipos ajudam a comunicar / documentar as camadas e os módulos • Tipos ajudam na DX e influenciam na facilidade do uso • Tipos conseguem checar o uso do nosso código, validar se as funções são chamadas da forma certa e retornando e esperado etc
7. • AirBnB recentemente migrou para TS e segundo eles, durante a migração eles resolveram 38% dos bugs abertos só a checagem de tipos. • Jest, Vue, Meteor e diversas outras grandes frameworks estão migrando para TS.
9. • CRA, Parcel.js, Nuxt.js, Razzle.js, Poi.js etc já suportam TypeScript. • Tem dezenas de guias, artigos, vídeos, boilerplates e outros conteúdos ensinando a inicializar seu projeto.
10. O que de verdade é importante?
11. Dicas importantes sobre tipagem 1. Usar inferência de tipos sempre que possível. 2. Manter seu código o mais restrito e previsível possível com os tipos. 3. Não super-complicar sua arquitetura com camadas e APIs desnecessárias.
12. PropTypes vs TypeScript
14. • Uso a propriedade `propTypes` para definir os tipos das propriedades usando um "esquema" com o `PropTypes`. • Checagem feita em tempo de execução.
15. • O componente mesmo com a assinatura errada é renderizado. • A mensagem de erro eu consigo ver no console.
17. • É necessário criar um `type` ou uma `interface` para definir o contrato das props. • Checagem feita em tempo de compilação.
18. • Erro de compilação. A aplicação nem executa quando uso uma assinatura errada.
19. • Se você for fazer uma biblioteca ou um pacote de componentes e quiser manter um suporte bacana para JS é importante usar propTypes e um `type` ou uma `interface`. • Para os outros casos é perder tempo. Um `type` ou `interface` vai te entregar uma DX melhor. Quando usar cada ou ambas?
20. Quais os tipos dos componentes?
21. • São classes do React.js. • Tem `Props` e `State` como genéricos, mas ambos são opcionais. Component & PureComponent
22. • Idêntico ao `SFC` e `StatelessComponent`. • Tem `Props` como genérico. • Tem também um `SFC` e um `StatelessComponent`, mas eles estão depreciados por causa dos React Hooks. FC & FunctionComponents
23. • Todo `FC` é uma função que recebe props, opcionalmente um contexto e retorna `null` ou `JSX.Element`. • Mais flexível que usar um tipo de alta-ordem. Function Components sem `FC` / `FunctionComponent`
24. • Componentes também são funções e podem usar tipos genéricos. • Trade-off, TSX tem um suporte ruim para genéricos. Ele confunde declaração de genéricos com JSX.
25. • Tipo de alta-ordem que infere o tipo das props de um componente. • Útil para reusar e compor as props de outros componentes. ComponentProps
26. • Tipo de alta-ordem que infere o tipo das props de um componente e sua ref. • Útil para reusar e compor as props de outros componentes. ComponentPropsWithRef
27. Como tipar React Hooks?
28. • TypeScript desde a versão 3.4 consegue transformar literais em tipos usando `as const`. Hooks com tuplas
29. • Basta usar os tipos do retorno do Rook, como em qualquer outra função. • É possível usar também o HOT `ReturnType`. Hooks compostos
30. Dúvidas? Sugestões? Xingamentos?
31. t.me/typescriptbr meetup.com/typescriptbr