O TypeScript é uma linguagem de programação que adiciona tipagem estática ao JavaScript, trazendo mais segurança e facilidade no desenvolvimento de aplicações complexas. Este artigo explora como configurar e utilizar o TypeScript em projetos React, destacando os benefícios da tipagem estática e a forma de integrar o TypeScript com o React. Além disso, serão abordadas dicas de como utilizar hooks, tipar props e configurar o ESLint para uma experiência produtiva com o TypeScript.

Utilizando TypeScript no React

O TypeScript é uma linguagem de programação que adiciona tipagem estática ao JavaScript, trazendo mais segurança e facilidade no desenvolvimento de aplicações complexas. Ele permite definir os tipos das variáveis, parâmetros de função e retornos de função, identificando erros no código em tempo de desenvolvimento. Além disso, o TypeScript é um superconjunto do JavaScript, o que facilita a migração de projetos JavaScript para TypeScript.

  • TypeScript adiciona tipagem estática ao JavaScript, trazendo mais segurança e facilidade no desenvolvimento de aplicações complexas.
  • Permite definir os tipos das variáveis, parâmetros de função e retornos de função, identificando erros no código em tempo de desenvolvimento.
  • É um superconjunto do JavaScript, o que facilita a migração de projetos JavaScript para TypeScript.

Configurando o projeto

Para configurar um projeto React com TypeScript, utilizaremos o create-react-app, que possui templates prontos para iniciar projetos React com TypeScript de forma simples. Após criar a pasta do projeto, rodamos um comando para configurar o projeto React com TypeScript. Feito isso, o create-react-app já configura tudo que precisamos para utilizar React com TypeScript no projeto.

  • Utilizaremos o create-react-app, que possui templates prontos para iniciar projetos React com TypeScript de forma simples.
  • O create-react-app já configura tudo que precisamos para utilizar React com TypeScript no projeto.

Estrutura do projeto

Dentro da pasta src, temos a estrutura padrão de componentes, assets e index que já foram criados. Essa estrutura é comum em projetos React e permite uma organização eficiente do código. O create-react-app já configura tudo que precisamos para utilizar React com TypeScript no projeto.

  • A pasta src contém a estrutura padrão de componentes, assets e index.
  • Essa estrutura é comum em projetos React e permite uma organização eficiente do código.

Introdução ao TypeScript com React

A introdução ao TypeScript com React traz mudanças significativas na estrutura dos arquivos e na forma de criar components, mas mantém a essência do desenvolvimento em React. Agora, ao invés dos arquivos .js, utilizamos arquivos .tsx, indicando que são arquivos TypeScript com JSX, a sintaxe de templates do React.

  • A introdução ao TypeScript com React traz mudanças significativas na estrutura dos arquivos e na forma de criar components
  • Utilizamos arquivos .tsx, indicando que são arquivos TypeScript com JSX, a sintaxe de templates do React

Arquivo tsconfig.json

O arquivo tsconfig.json na raiz do projeto contém as configurações do compilador TypeScript, o que é essencial para o funcionamento correto do TypeScript com React.

  • O arquivo tsconfig.json na raiz do projeto contém as configurações do compilador TypeScript
  • Essencial para o funcionamento correto do TypeScript com React

Mudanças na Criação de Components

Apesar das mudanças nos arquivos e na configuração, a estrutura e a forma de criar components React permanecem inalteradas. O TypeScript apenas realiza a checagem dos tipos durante o desenvolvimento.

  • A estrutura e a forma de criar components React permanecem inalteradas
  • O TypeScript realiza a checagem dos tipos durante o desenvolvimento

Tipagem do Componente App

Ao importar o componente App, é necessário tipá-lo, indicando ao TypeScript os tipos esperados, como no exemplo de utilização do React.FC para declarar que o componente não possui estado e especificar as props esperadas.

  • Ao importar o componente App, é necessário tipá-lo
  • Utilização do React.FC para declarar que o componente não possui estado e especificar as props esperadas

Benefícios da Tipagem de Props

O TypeScript traz benefícios significativos na tipagem de props passadas para components, oferecendo segurança e prevenindo erros ao validar a correta passagem e tipos das props. Isso é ilustrado no exemplo do componente User, onde a interface UserProps define a estrutura das props esperadas e o componente é tipado para receber essas props.

  • O TypeScript traz benefícios significativos na tipagem de props passadas para components
  • Oferece segurança e previne erros ao validar a correta passagem e tipos das props
  • A interface UserProps define a estrutura das props esperadas e o componente é tipado para recebê-las

Utilizando hooks com TypeScript

Os React Hooks funcionam normalmente com TypeScript. Só precisamos tipar os hooks para o TypeScript conseguir inferir os tipos corretamente.

  • Ao utilizar o TypeScript em conjunto com os React Hooks, é importante tipar os hooks para que o TypeScript possa inferir os tipos corretamente.
  • Ao tipar os hooks, como o useState e o useEffect, o TypeScript consegue validar se estamos utilizando os hooks da forma correta, aumentando a segurança e qualidade do código.
  • A tipagem dos hooks no TypeScript ajuda a prevenir bugs relacionados a tipos incorretos, trazendo benefícios significativos para a manutenção e escalabilidade do projeto.

Configurando o ESLint

Para termos uma experiência ainda melhor com TypeScript no React, podemos configurar o ESLint com regras específicas. O ESLint vai analisar o código e mostrar problemas, erros ou má práticas.

  • A configuração do ESLint com regras específicas para TypeScript no React permite identificar problemas, erros e más práticas no código, contribuindo para a qualidade e consistência do projeto.
  • Ao instalar e configurar o ESLint com as dependências necessárias, como @typescript-eslint/eslint-plugin, @typescript-eslint/parser e eslint, é possível garantir uma base sólida para a detecção de problemas no código TypeScript.
  • A utilização do ESLint em conjunto com o TypeScript no React promove uma experiência mais produtiva, ao identificar possíveis problemas e garantir a qualidade do código, resultando em um desenvolvimento mais eficiente e confiável.

Aprenda mais sobre Tecnologia!

Para complementar seus estudos, recomendo o curso de Introdução a TypeScript da DNC, onde disponibilizamos 3 aulas 100% gratuitas pra você aproveitar e dar o primeiro passo na área.

Crie uma conta para obter acesso ao curso e dê o primeiro passo para se tornar expert em Tecnologia.

Conclusão

Vimos o quão simples é adicionar TypeScript a projetos React utilizando templates como o `create-react-app`. O TypeScript não muda quase nada na estrutura do projeto React. A grande diferença está na tipagem, que traz muitos benefícios como segurança e qualidade de código.

  • A adição do TypeScript a projetos React utilizando templates como o `create-react-app` é um processo simples, que traz benefícios significativos em termos de segurança e qualidade de código.
  • Apesar de não alterar substancialmente a estrutura do projeto React, a tipagem proporcionada pelo TypeScript oferece vantagens consideráveis, incluindo a prevenção de erros e a melhoria da manutenibilidade do código.
  • O uso do TypeScript nos projetos React, juntamente com a configuração do ESLint, pode aumentar a produtividade do time de desenvolvimento, prevenindo bugs de tipagem e promovendo um ambiente de trabalho mais eficiente e confiável.