O MUNDO MÁGICO DE TYPESCRIPT COM REACT

Laura Beatris

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

ROADMAP

- 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

SUGESTÃO DE PROPRIEDADES

HIGHLIGHT DE ERROS

DOCUMENTAÇÃO DO SEU PROJETO

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.

COMO O DESENVOLVER FICA QUANDO AS TIPAGENS DO PROJETO SE TORNAM MAIS COMPLICADAS QUE A PRÓPRIA REGRA DE NEGÓCIO

COMO TYPESCRIPT E REACT FUNCIONAM JUNTOS

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

SETAR TIPOS PARA ITENS DE UMA ARRAY

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

COMPONENTES COM DIFERENTES COMPORTAMENTOS DE PROPRIEDADES

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.

TIPAR COMPONENTES QUE SÃO PASSADOS COMO PROPRIEDADES

SEGURANÇA NA CAMADA DE NETWORK

Transparência no retorno de requests

Contrato definido entre API's e client

Barrar quebras de contrato em desenvolvimento

SEGURANÇA NA CAMADA DE NETWORK

Se você utiliza GraphQL, existe uma ferramenta chamada codegen em que gera tipagens e hooks de mutations e queries, se baseando em um schema.

CASOS DE USO

- 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

MIGRAÇÃO DE PROJETOS JAVASCRIPT PARA TYPESCRIPT

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.

MIGRAÇÃO DE PROJETOS JAVASCRIPT PARA TYPESCRIPT

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