React: integrando TypeScript em projetos

Por que usar TypeScript em projetos React ? - Introdução

Apresentando o instrutor e o curso

Olá, estudante da Alura! Meu nome é Pedro, sou instrutor de front-end na Alura.

Audiodescrição: Pedro é um homem branco, com barba e cabelos escuros. Ele veste uma roupa preta e está em um ambiente iluminado pelas cores rosa e azul.

Seja bem-vindo a mais um curso de React na nossa plataforma da Alura. Este curso está excepcional, pois vamos explorar o uso do TypeScript em seus projetos com JavaScript, utilizando React.

Introduzindo o projeto AdoPets

Como aliado nesta jornada, teremos o projeto do AdoPets, que está sendo exibido na tela do navegador. Este projeto é voltado para a adoção responsável de animais de estimação. Nele, temos um módulo de login, um módulo de criação de contas, uma seção de edição de perfil e um formulário para entrar em contato com o responsável pelo animal disponível para adoção. O responsável pode ser tanto uma pessoa quanto uma instituição.

Este projeto foi desenvolvido utilizando as tecnologias Vite e React.

Explicando as tecnologias utilizadas

Estamos utilizando o Tailwind para estilização e a biblioteca do React Router para a navegação dos nossos componentes. Este projeto exigirá que já tenhamos conhecimento prévio sobre o funcionamento do React, dos hooks e de como as coisas funcionam utilizando JavaScript.

Quanto ao TypeScript, não se preocupe, pois nós, junto com o instrutor Pedro, vamos caminhar juntos, passo a passo, nessa jornada até conseguirmos dominar completamente o TypeScript para que possamos utilizá-lo em nossos projetos.

Revelando a surpresa e motivando os alunos

Há uma surpresa que não revelaremos agora, mas esperamos que gostem muito deste curso. Ao final, teremos nosso projeto totalmente transformado, funcionando com TypeScript. Vamos implementar um TypeCheck para garantir que não tenhamos problemas de tipagem no nosso projeto.

A surpresa foi preparada com muito cuidado para que possamos aprender juntos, que é sempre o lema aqui da escola.

Preparem-se para a sequência, mantenham-se hidratados durante essa série de vídeos, e vamos começar juntos, com determinação, no mundo do TypeScript em projetos com React. Nos vemos na sequência, estudantes!

Por que usar TypeScript em projetos React ? - Entendendo os beneficios do TypeScript

Explorando o projeto AdoPatch

Atualmente, estamos exibindo o projeto do AdoPatch na tela. Já conhecemos mais sobre ele, e agora é o momento de mergulharmos no código para entender quais são as dificuldades e problemas que precisamos solucionar, além de como o TypeScript pode nos auxiliar nessa jornada.

Abrimos o editor de texto com o projeto do React AdoPatch app aberto. No menu lateral esquerdo, navegamos até "src" e abrimos as pastas "components" e "card". Verificamos se o servidor está rodando, e sim, tanto o servidor quanto o nosso app pelo Vite estão ativos no terminal integrado do editor de texto. Vamos minimizar essa parte, pois não precisamos mexer nisso agora. Vamos discutir as principais dificuldades deste projeto e por que o TypeScript será um grande aliado na resolução desses problemas.

Analisando o componente Card

Tomemos como exemplo o arquivo card.jsx, que é um componente simples. Ele possui um import do link do React Router, utilizado na linha 11, e as demais linhas são responsáveis por exibir a foto do pet disponível para adoção, o nome do pet, uma breve descrição e a localização, incluindo cidade e abreviação do estado.

Para começar, vamos observar o código do componente Card:

import React from 'react';
import { Link } from 'react-router';

const Card = ( { pet } ) => {
    return (
        <div className='bg-[#F6F6F6] rounded-lg shadow-md p-6 w-full flex flex-col items-center justify-center'>
            <img src={pet.image} alt={pet.name} className='w-60 h-40 object-cover rounded-full' />
            <h2 className='text-2xl font-bold text-[#3772FF] mt-4'>{pet.name}</h2>
            <p className='text-lg text-[#737380] mt-2 text-center'>{pet.description}</p>
            <p className='text-lg text-[#737380] my-2 text-center'>{pet.location}</p>
            <Link to='/contact'>
                <p className='text-lg text-[#3772FF] underline'>Falar com responsável</p>
            </Link>
        </div>
    );
};

export default Card;

O React, da forma como está implementado apenas com JavaScript, funciona bem e a aplicação está totalmente funcional. No entanto, em um ambiente maior, com mais pessoas desenvolvedoras trabalhando no projeto, podem surgir problemas. Por exemplo, na linha 9 do card.jsx, se digitarmos rapidamente e sem um recurso de autocomplete — que o TypeScript oferece — podemos cometer erros. Suponha que, na pressa, digitamos "description" com um "i" logo após a letra "p". Ao salvar o arquivo, nenhum erro é exibido no terminal integrado, e o componente é atualizado sem problemas. No entanto, ao verificar no navegador, a descrição do pet a ser adotado não aparece mais.

Corrigindo erros de digitação

Veja como um erro de digitação pode ocorrer:

<p className='text-lg text-[#737380] mt-2 text-center'>{pet.descripition}</p>

Esse é um problema comum quando não temos um recurso que nos force a utilizar propriedades existentes e coerentes com o contexto. O primeiro ponto a destacar é a experiência da pessoa desenvolvedora, que pode errar um nome ou esquecer uma propriedade existente no objeto pet. Ao passar o mouse na linha 4, onde o parâmetro pet é passado na função, percebemos que ele pode ser qualquer coisa: um objeto, número, booleano, etc., e o componente não se importa com o que está sendo passado.

Corrigimos o nome na linha 9, salvamos e, ao retornar ao navegador, tudo funciona como antes:

<p className='text-lg text-[#737380] mt-2 text-center'>{pet.description}</p>

O primeiro ponto é termos noção das propriedades que serão retornadas dentro desse objeto. A partir do momento em que atribuímos um tipo a esse parâmetro, podemos evitar esses problemas.

Introduzindo interfaces no Desbrava app

Em outro projeto, o Desbrava app, no arquivo index.tsx do componente app-header, temos uma definição de interface. Vamos entrar em detalhes sobre o que é uma interface, um tipo, um enum, e as diferenças entre eles. O importante aqui é que passamos essa interface na linha 4, chamada AppHeaderProps, que define as propriedades dos parâmetros que o componente app-header vai receber.

Aqui está a definição da interface e o componente AppHeader:

import { Appbar } from 'react-native-paper';
import { colors } from '../../styles/colors';

interface AppHeaderProps {
    title: string;
    icon?: string;
    onPress?: () => void;
}

const AppHeader = ({ title, icon, onPress }: AppHeaderProps) => {
    return (
        <Appbar.Header style={{ backgroundColor: colors.black }}>
            <Appbar.Content color={colors.onSurface} title={title} />
            {icon && <Appbar.Action color={colors.onSurface} icon={icon} onPress={onPress} />}
        </Appbar.Header>
    );
};

export default AppHeader;

Na linha 5, estamos definindo que ele receberá um title, que será uma string. Ele também poderá receber um ícone, indicado pela interrogação antes dos dois pontos, o que significa que o ícone pode ou não ser passado, e será do tipo string. Além disso, ele pode receber ou não uma função onPress, que retornará um void. Vamos discutir mais sobre isso em breve, pois o foco não são os tipos em si, mas os motivos pelos quais utilizamos os tipos.

Benefícios do TypeScript na prevenção de erros

Por exemplo, na linha 13, ao utilizar o title, se trocarmos esse title e, por exemplo, esquecermos a letra "E", o próprio TypeScript, que está configurado, já nos alerta com um erro, indicando que não encontrou title sem o "E" e sugere a correção. Assim, o TypeScript nos protege de passar uma propriedade inexistente ou algo fora do esperado para o componente.

Esse é um ponto inicial que funciona muito bem para resolver alguns problemas dentro do nosso componente. No entanto, há uma questão ainda mais relevante, que considero um dos pontos mais fortes do TypeScript. Já exemplificamos o componente usando essa interface no Desbrava App. Voltando ao nosso projeto, um diferencial importante do TypeScript é facilitar a documentação dos nossos componentes.

Documentando com JSDocs e TypeScript

Podemos escrever documentação utilizando, por exemplo, o JSDocs. Para usar o JSDocs, basta inserir uma barra com dois asteriscos, e ele já cria o JSDocs de forma clássica, padrão nos editores de texto mais atuais, como o Cursor, que é o editor que estamos utilizando. No entanto, com o JSDocs, escrevemos bastante manualmente. Se não quisermos ler o JSDocs detalhadamente, com o TypeScript, ao passar o mouse sobre o componente, além de ter o JSDocs bem formatado, temos um resumo perfeito do que o componente faz.

No caso atual, como ele não está tipado, o TypeScript mostra que o Card é uma função anônima que recebe um parâmetro pet, que pode ser de qualquer tipo, e retorna um elemento React e JSX. O JSX é a forma moderna de misturar JavaScript com HTML, que será interpretado pelo DOM no navegador. Temos um resumo, mas ele não está bem feito, pois não estamos utilizando o TypeScript. Ao passar o mouse sobre o Card em um local onde ele é utilizado, não conseguimos identificar exatamente o que ele faz.

Iniciando a migração para TypeScript

Para iniciar essa migração, precisamos instalar o TypeScript no projeto e configurar o tsconfig. Vamos ver tudo isso na prática, começando do zero, para transformar o projeto AdoPatch em um projeto que utilize o TypeScript e melhore a Developer Experience. Isso trará mais conforto para as pessoas desenvolvedoras, pois, no final das contas, a ferramenta utilizada não importa tanto se o produto agrega valor. No entanto, se a ferramenta proporciona mais conforto, segurança e legibilidade, como o TypeScript faz, devemos considerar essa configuração.

Na sequência, vamos instalar o TypeScript no projeto para iniciar a adoção gradual. Não é necessário migrar todo o projeto de uma vez; podemos fazer isso aos poucos. Vamos ver isso em breve. Até mais!

Por que usar TypeScript em projetos React ? - Configurando o TypeScript em um projeto React

Iniciando a instalação das dependências para TypeScript

Vamos iniciar a instalação das dependências necessárias para migrar gradativamente nosso projeto para TypeScript. Primeiramente, acessamos o navegador e consultamos a documentação do React, que está traduzida. Para acessá-la, basta digitar pt-br.react.dev-learn-typescript. Solicitamos que o link seja incluído nas notas da aula para facilitar o acesso.

Nesta página, encontramos um passo a passo sobre o que precisa ser instalado na aplicação para adicionar o TypeScript e, principalmente, habilitar o funcionamento dos types. Isso é essencial para migrarmos de componentes que não fornecem muita informação para componentes que utilizam TypeScript. Embora mencionemos componentes, essa migração se aplica a todos os arquivos que utilizamos no React, incluindo pastas, rotas e o useContext dentro da aplicação. Vamos transformar arquivos .jsx em .tsx, substituindo o "J" de JavaScript pelo "T" de TypeScript.

Instalando dependências e configurando TypeScript

Descendo na página, encontramos o subtítulo "Adicionando o TypeScript a um projeto React existente" e as instruções para executar npm install @types/react @types/react-dom. Vamos começar instalando essas dependências:

npm install @types/react @types/react-dom

Além disso, precisamos instalar o TypeScript, pois nosso projeto ainda não o possui. Copiamos essa instrução de instalação e, no editor de texto, interrompemos temporariamente a execução do servidor e da aplicação para realizar algumas refatorações. No terminal integrado, colamos a instrução para adicionar o TypeScript:

npm install @types/react @types/react-dom typescript

Criando e configurando o arquivo tsconfig.json

Enquanto a instalação ocorre, que foi bem rápida, precisamos adicionar um arquivo .tsconfig, responsável por fornecer configurações iniciais ao projeto. No GitHub do próprio .tsconfig, encontramos bases de configurações prontas, evitando a necessidade de configurar manualmente para cada projeto. O acesso é feito em github.com/tsconfig/bases. Descendo o arquivo, encontramos uma tabela com várias recomendações para o .tsconfig.

Temos aqui projetos com o Create React App, que inclusive foi descontinuado. Também temos para Next.js, várias versões do Node, e o Vite React, que é a stack que estamos utilizando neste projeto do Adobe Apache. Ao clicar nela, somos redirecionados para uma página onde é apresentada a instalação com npm install --save-dev, tsconfig, Vite React e as configurações do tsconfig.

Instalando e configurando o tsconfig Vite React

Vamos realizar essa instalação. No editor de texto, no terminal integrado, faremos a instalação do tsconfig Vite React:

npm install --save-dev @tsconfig/vite-react

Agora, na raiz do projeto, criaremos um arquivo chamado tsconfig.json. Fui conferir rapidamente no GitHub e confirmei que o formato é tsconfig.json. Utilizaremos um extends para incorporar todas as configurações da biblioteca tsconfig Vite React que instalamos. Basta voltar ao GitHub e copiar o extends do tsconfig Vite React, tsconfig.json, para obter todas as informações de configuração.

{
    "extends": "@tsconfig/vite-react/tsconfig.json"
}

Ajustando configurações e verificando o projeto

Abrimos a notação de objeto, passamos o extends e salvamos o arquivo. O sistema está indicando que não encontrou entradas no arquivo de configuração, esperando por includes e excludes. Vamos passar um include como src para evitar esse erro, e um exclude como nodeModulesDist para que o erro não persista. Salvamos o arquivo:

{
    "extends": "@tsconfig/vite-react/tsconfig.json",
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
}

Como não voltaremos a este arquivo, não precisamos nos preocupar com as demais mensagens de alerta, pois o projeto já funcionará corretamente.

Para evitar problemas iniciais com o tsconfig, passamos as configurações necessárias, mesmo que ele solicite nodeModulesDist e outras coisas. Não precisamos nos preocupar com isso, pois a configuração principal vem do tsconfig.json, que conseguimos acessar via clique. Tudo que está configurado lá é copiado para o nosso projeto.

Finalizando a configuração e preparando para a migração

Vamos fechar esse arquivo de configuração, pois não precisamos nos preocupar com ele. Essa configuração não é importante no momento. Vamos rodar o projeto novamente para verificar que nada foi alterado:

npm run dev

Ao voltar, percebemos que o servidor não está rodando, mas mesmo com a instalação do TypeScript, não houve nenhuma alteração visual no projeto. Isso ocorre porque o TypeScript é uma ferramenta que auxilia no desenvolvimento.

Agora, com o TypeScript configurado no projeto, começaremos a migração dos arquivos .jsx para .tsx. Faremos isso na sequência para observar como essas novas configurações funcionarão. Vejo vocês na próxima etapa, estudantes.

Sobre o curso React: integrando TypeScript em projetos

O curso React: integrando TypeScript em projetos possui 180 minutos de vídeos, em um total de 39 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Por que usar TypeScript em projetos React ?
Tipando props e estado
Tipos utilitários e interfaces genéricas
Trabalhando com useRef, useReducer e useContext tipados
Lidando com bibliotecas externas sem tipos definidos