Migração de JavaScript para TypeScript

Palestra apresentada durante o evento TDC Transformation, para a empresa Trybe trazendo o caso de uso de Migração de um projeto de JavaScript para TypeScript, no caso a Design System Ada.

Transcript

1. Migração de JavaScript para TypeScript 25 de agosto de 2021
2. Introdução pessoal - Lucas Viana (a.k.a. Baú) - Caiçara - Desenvolvedor de Software na Trybe - Redes sociais: @mechamobau
3. >01. Motivação Porque migrar para TypeScript? >03. Conclusão O que tivemos de vantagens e desvantagens em uma migração de JS para TS Agenda >02. Avaliação O que deve ser considerado antes de migrar?
4. >01. Motivação Porque migrar para TypeScript? >03. Exemplos Exemplos de migração para TypeScript; Agenda >02. Avaliação O que deve ser considerado antes de migrar? >04. Processo Como migrar de forma pouco traumática.
5. 01. Motivação Porque migrar para TypeScript?
6. Motivação Porque migrar para TypeScript?
7. Motivação Porque migrar para TypeScript? O TypeScript é a segunda linguagem que as pessoas mais querem trabalhar do mundo
8. Motivação Porque migrar para TypeScript?
9. Motivação Porque migrar para TypeScript?
10. Motivação Porque migrar para TypeScript? ❤
11. Motivação Porque migrar para TypeScript?
12. Motivação Porque migrar para TypeScript?
13. Motivação Porque migrar para TypeScript?
14. Motivação Porque migrar para TypeScript?
15. Downloads ~20M Downloads por semana no npm Contribuidores +580 Contribuidores totais da linguagem Adoção 2a linguagem mais procurada, de acordo com StackOverflow Survey 2021 Motivação Porque migrar para TypeScript?
16. Motivação Porque migrar para TypeScript?
17. Motivação Porque migrar para TypeScript?
18. Motivação Porque migrar para TypeScript?
19. 02. Avaliação O que deve ser considerado antes de migrar?
20. Avaliação O que deve ser considerado antes de migrar? Para migração da DS seguimos etapas de migração que contaram com ao todo 4 etapas envolvendo código.
21. Etapa 0 Consertar erros de tipos do JS
22. Etapa 0 Consertar erros de tipos do JS Para que seja possível visualizar os erros de tipos, você pode adicionar o jsconfig.json no seu projeto JavaScript e habilitar a opção checkJs.
23. Etapa 0 Consertar erros de tipos do JS
24. Etapa 0 Consertar erros de tipos do JS
25. Etapa 1 Consertar erros de tipos das bibliotecas
26. Etapa 1 Consertar erros de tipos das bibliotecas
27. Etapa 1 Consertar erros de tipos das bibliotecas
28. Etapa 2 Migrar arquivos e tipos
29. Etapa 2 Migrar arquivos e tipos
30. jsconfig.json tsconfig.json tsconfig.base.json Etapa 2 Migrar arquivos e tipos
31. tsconfig.base.json Etapa 2 Migrar arquivos e tipos
32. tsconfig.json Etapa 2 Migrar arquivos e tipos
33. Etapa 2 Migrar arquivos e tipos
34. Etapa 3 Proibição do any implícito
35. Etapa 3 Proibição do any implicitamente usado Nesta etapa adicionamos as propriedades que restringem o uso do any. Assim como consertamos os locais onde o any apareceu implicitamente no código.
36. Etapa 3 Proibição do any implicitamente usado
37. Etapa 3 Proibição do any implicitamente usado
38. Etapa 3 Proibição do any implicitamente usado
39. Etapa 3 Proibição do any implicitamente usado
40. 03. Conclusão Valeu a pena a migração de JS para TS?
41. Sim :)
42. 03. Conclusão Tipos nas Props
43. 03. Conclusão Autocomplete
44. 03. Conclusão Autocomplete - Nome de ícones disponíveis
45. 03. Conclusão Autocomplete - Hooks
46. 03. Conclusão Documentação de componentes
48. betrybe.com