Slide 1
Slide 1 text
Migração de JavaScript para
TypeScript
25 de agosto de 2021
Slide 2
Slide 2 text
Introdução pessoal
- Lucas Viana (a.k.a. Baú)
- Caiçara
- Desenvolvedor de Software na Trybe
- Redes sociais: @mechamobau
Slide 3
Slide 3 text
>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?
Slide 4
Slide 4 text
>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.
Slide 5
Slide 5 text
01. Motivação
Porque migrar para TypeScript?
Slide 6
Slide 6 text
Motivação
Porque migrar para TypeScript?
Slide 7
Slide 7 text
Motivação
Porque migrar para TypeScript?
O TypeScript é a segunda
linguagem que as pessoas mais
querem trabalhar do mundo
Slide 8
Slide 8 text
Motivação
Porque migrar para TypeScript?
Slide 9
Slide 9 text
Motivação
Porque migrar para TypeScript?
Slide 10
Slide 10 text
Motivação
Porque migrar para TypeScript?
❤
Slide 11
Slide 11 text
Motivação
Porque migrar para TypeScript?
Slide 12
Slide 12 text
Motivação
Porque migrar para TypeScript?
Slide 13
Slide 13 text
Motivação
Porque migrar para TypeScript?
Slide 14
Slide 14 text
Motivação
Porque migrar para TypeScript?
Slide 15
Slide 15 text
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?
Slide 16
Slide 16 text
Motivação
Porque migrar para TypeScript?
Slide 17
Slide 17 text
Motivação
Porque migrar para TypeScript?
Slide 18
Slide 18 text
Motivação
Porque migrar para TypeScript?
Slide 19
Slide 19 text
02. Avaliação
O que deve ser considerado antes de migrar?
Slide 20
Slide 20 text
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.
Slide 21
Slide 21 text
Etapa 0
Consertar erros de
tipos do JS
Slide 22
Slide 22 text
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.
Slide 23
Slide 23 text
Etapa 0
Consertar erros de tipos do JS
Slide 24
Slide 24 text
Etapa 0
Consertar erros de tipos do JS
Slide 25
Slide 25 text
Etapa 1
Consertar erros de
tipos das bibliotecas
Slide 26
Slide 26 text
Etapa 1
Consertar erros de tipos das bibliotecas
Slide 27
Slide 27 text
Etapa 1
Consertar erros de tipos das bibliotecas
Slide 28
Slide 28 text
Etapa 2
Migrar arquivos e
tipos
Slide 29
Slide 29 text
Etapa 2
Migrar arquivos e tipos
Slide 30
Slide 30 text
jsconfig.json
tsconfig.json
tsconfig.base.json
Etapa 2
Migrar arquivos e tipos
Slide 31
Slide 31 text
tsconfig.base.json
Etapa 2
Migrar arquivos e tipos
Slide 32
Slide 32 text
tsconfig.json
Etapa 2
Migrar arquivos e tipos
Slide 33
Slide 33 text
Etapa 2
Migrar arquivos e tipos
Slide 34
Slide 34 text
Etapa 3
Proibição do any
implícito
Slide 35
Slide 35 text
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.
Slide 36
Slide 36 text
Etapa 3
Proibição do any implicitamente usado
Slide 37
Slide 37 text
Etapa 3
Proibição do any implicitamente usado
Slide 38
Slide 38 text
Etapa 3
Proibição do any implicitamente usado
Slide 39
Slide 39 text
Etapa 3
Proibição do any implicitamente usado
Slide 40
Slide 40 text
03. Conclusão
Valeu a pena a migração de JS para TS?
Slide 41
Slide 41 text
Sim :)
Slide 42
Slide 42 text
03. Conclusão
Tipos nas Props
Slide 43
Slide 43 text
03. Conclusão
Autocomplete
Slide 44
Slide 44 text
03. Conclusão
Autocomplete - Nome de ícones disponíveis
Slide 45
Slide 45 text
03. Conclusão
Autocomplete - Hooks
Slide 46
Slide 46 text
03. Conclusão
Documentação de componentes
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
betrybe.com