📚 Migração React para TypeScript

Projeto de aprendizado e desenvolvimento em TypeScript

👨‍💻 Sobre o Projeto

Este projeto documenta minha primeira experiência com TypeScript, realizando a migração de uma aplicação React para TypeScript. O objetivo principal é aprofundar meus conhecimentos em desenvolvimento front-end e adicionar tipagem estática ao código, melhorando a qualidade, manutenibilidade e experiência de desenvolvimento. Desenvolvedor: Mauricio Grass de Bronstein

🌐 Demo

Acesse o projeto em produção: https://react-to-typescript.vercel.app

🎯 Objetivos

Aprender os fundamentos do TypeScript Compreender os benefícios da tipagem estática em projetos React Aplicar boas práticas de tipagem em componentes, hooks e props Melhorar a experiência de desenvolvimento com IntelliSense e autocomplete Reduzir bugs relacionados a tipos de dados

🛠️ Tecnologias Utilizadas

React - Biblioteca JavaScript para construção de interfaces TypeScript - Superset JavaScript com tipagem estática Node.js - Ambiente de execução JavaScript npm/yarn - Gerenciador de pacotes

📋 Processo de Migração

1. Configuração Inicial

Instalação do TypeScript e tipos do React Configuração do tsconfig.json Renomeação de arquivos .js para .tsx/.ts

2. Tipagem de Componentes

Conversão de componentes funcionais para TypeScript Definição de interfaces para Props Tipagem de estados com useState Tipagem de contextos e hooks customizados

3. Ajustes e Correções

Resolução de erros de compilação Refinamento de tipos Implementação de tipos genéricos onde necessário

💡 Principais Aprendizados

Diferença entre interface e type Uso de Generics em TypeScript Tipagem de eventos (onClick, onChange, etc.) Props opcionais vs obrigatórias Tipagem de children e componentes compostos Como trabalhar com tipos do React (React.FC, React.ReactNode, etc.)

🚀 Como Executar bash# Clone o repositório git clone [url-do-repositorio]

Entre no diretório

cd [nome-do-projeto]

Instale as dependências

npm install

ou

yarn install

Execute o projeto

npm start

ou

yarn start

📚 Recursos Utilizados

Documentação Oficial do TypeScript
React TypeScript Cheatsheet
TypeScript Deep Dive

🤝 Contribuições
Este é um projeto pessoal de aprendizado, mas sugestões e feedbacks são sempre bem-vindos!

⭐ Desenvolvido por Mauricio Grass de Bronstein | Em constante aprendizado e evolução no mundo do Front-End