Front End Engineer
Focada em contribuir para a comunidade de React, compartilhando conhecimento e resolvendo problemas.
Entusiasta de tecnologias como Elixir e Ruby
LauraBeatris
lauradotjs
- Como o TypeScript e React funcionam juntos
- Os motivos chaves para se utilizar TypeScript
- Exemplos avançados
- Segurança na camada de network
- Casos de uso
- Migração de projetos de Javascript para TypeScript
As tipagens fazem com que o código seja preditivo
Desenvolvedores conseguem entender melhor a lógica do código, mesmo tendo sido feito por outras pessoas.
React é uma biblioteca baseada em JavaScript para desenvolvimento de interfaces.
TypeScript é um superset de JavaScript
React + TypeScript = Desenvolvimento de interfaces utilizando uma versão tipada do JavaScript.
O TypeScript compila todo código em React para fazer uma checagem dos tipos e não retira nenhum output de JavaScript.
Inicializar um projeto com CRA + TypeScript
Adicionar TypeScript em um projeto CRA existente
Como podemos extrair os tipos de cada item dessa array para que a validação seja feita em compile time?
O compilador vai inferir que essa array pode ser alterada em runtime, então quando tentarmos criar o tipo de um item, esse vai ser o resultado:
Para o compilador entender que essa array não vai ser alterada, temos que fazer um casting para uma constante, ou seja, uma array imutável e readonly.
E agora somente itens válidos serem aceitos como propriedade
https://codesandbox.io/s/advanced-typescript-talk-props-variants-ko3vm
O primeiro passo é criar a tipagem das variantes do componente.
A tipagem das props do componente devem ser alteradas de maneira condicional em relação a sua variante.
Cada variante do Button vai receber sua tipagem de propriedades.
Transparência no retorno de requests
Contrato definido entre API's e client
Barrar quebras de contrato em desenvolvimento
Se você utiliza GraphQL, existe uma ferramenta chamada codegen em que gera tipagens e hooks de mutations e queries, se baseando em um schema.
- Melhorar o trabalho em equipe
- Diminuir bugs e regressão no ciclo de vida do software
- Camadas de dados complexas
- Softwares que precisam de uma manuntenção continua
Estragégias de migração
- Híbrida: Migrar arquivo por arquivo, arrumando erros de tipagem até que o projeto esteja completamente em TypeScript.
A flag -allowJs nos permite trabalhar com JavaScript e TypeScript ao mesmo tempo. O compilador faz algumas analises no código JS, com por exemplo, em JSDocs, e gera definições de tipo.
Estragégias de migração
- All-in: Converter um projeto JavaScript completamente para JavaScript, sem ser incremental, mas por via de codemods.
É necessário utilizar o tipo any ou @ts-ignore em algumas situações para o projeto compilar sem erros, mas ao longo do tempo isso pode ser refatorado.
https://github.com/airbnb/ts-migrate/tree/master/packages/ts-migrate