TypeScript: elevando seu código no React e Node.js
typescript

TypeScript: elevando seu código no React e Node.js

Hoje, vamos mergulhar no TypeScript e entender por que ele é tão importante para quem trabalha com React e Node.js, especialmente em projetos full-stack. Se você já brincou com JavaScript e começou a perceber que a tipagem solta pode ser uma dor de cabeça em projetos maiores, vai entender rapidinho a importância do TypeScript. E se você nunca ouviu falar dele, fica tranquilo: vou te explicar tudo passo a passo, sempre com exemplos práticos!

Por que aprender TypeScript?

Você já deve ter notado que o JavaScript tem uma flexibilidade enorme. Isso é ótimo quando estamos começando, mas, à medida que os projetos crescem, essa flexibilidade pode ser um problema. Imagine que você tem um formulário onde o usuário informa quantos dias deseja ficar em um hotel, e você espera que esse valor seja um número. Se por algum motivo esse dado for passado como string, o que acontece? Um bug! E é exatamente aí que o TypeScript entra para salvar o dia.
TypeScript é uma superset do JavaScript, o que significa que ele adiciona novas funcionalidades ao JavaScript sem remover nada. A principal delas? Tipagem estática. Isso significa que, com o TypeScript, você consegue definir o tipo das variáveis e, com isso, evita muitos erros que só descobrimos durante a execução do código.

Exemplo prático

Imagina que você está criando um aplicativo para planejar seus estudos e quer salvar informações sobre os cursos de React e Node.js, como a quantidade de projetos e aulas disponíveis. No JavaScript, você pode acabar passando dados incorretos entre as funções. Veja só:
const cursoReact = "React"; const projetosReact = "15"; // Opa, aqui é string, deveria ser número! const aulasReact = "437"; // O mesmo problema aqui! function planejarEstudos(curso, projetos, aulas) { console.log(`Planejando estudos do curso de ${curso}: ${projetos} projetos e ${aulas} aulas disponíveis.`); } planejarEstudos(cursoReact, projetosReact, aulasReact);
Esse código vai rodar normalmente, mas pode causar problemas se esses dados forem usados para cálculos mais complexos (como o progresso de estudos). Imagine o backend esperando números e recebendo strings... Não vai ser legal, né? Agora, veja como o TypeScript resolve isso de forma simples e elegante:
const cursoReact: string = "React"; const projetosReact: number = 15; const aulasReact: number = 437; function planejarEstudos(curso: string, projetos: number, aulas: number): void { console.log(`Planejando estudos do curso de ${curso}: ${projetos} projetos e ${aulas} aulas disponíveis.`); } planejarEstudos(cursoReact, projetosReact, aulasReact);
Olha que maravilha! Com TypeScript, se você tentar passar uma string no lugar de um número, ele já vai te avisar antes mesmo de rodar o código. E isso te salva de vários bugs lá na frente, especialmente em apps maiores. O TypeScript garante que cada dado esteja no formato certo, tornando seu código mais confiável.

Vamos adicionar Node.js ao planejamento?

Agora que temos os dados do React, vamos adicionar também os do Node.js. Olha só como fica:
const cursoNode: string = "Node.js"; const projetosNode: number = 8; const aulasNode: number = 485; function planejarEstudos(curso: string, projetos: number, aulas: number): void { console.log(`Planejando estudos do curso de ${curso}: ${projetos} projetos e ${aulas} aulas disponíveis.`); } planejarEstudos(cursoNode, projetosNode, aulasNode);
Com o TypeScript, você sabe exatamente quais tipos de dados cada função vai receber. Isso evita que você passe uma string em vez de um número e garante que o fluxo dos dados seja o correto. Além disso, a clareza do código aumenta, facilitando muito a manutenção e a colaboração com outros devs.

Principais vantagens do TypeScript

  • Tipagem estática: ao contrário do JavaScript, o TypeScript permite que você defina o tipo de cada variável, reduzindo drasticamente os erros durante o desenvolvimento.
  • Melhor manutenção: com a tipagem, fica muito mais fácil entender o que o código está fazendo e como os dados estão fluindo, o que facilita na hora de dar manutenção ou passar o projeto para outra pessoa.
  • Suporte a OOP (programação orientada a objetos): se você já trabalhou com outras linguagens como Java ou C#, vai adorar o suporte que o TypeScript oferece para classes, interfaces e herança.
  • Erros no momento da compilação: com TypeScript, muitos dos erros que você só veria em tempo de execução são detectados logo na hora de compilar o código.

Alguns conceitos importantes no TypeScript

  1. Tipagem de variáveis:
    1. const nome: string = "Rocketseat"; const idade: number = 10;
  1. Interfaces: ajudam a definir o formato de objetos e a garantir que eles tenham os campos corretos.
    1. interface Instrutor { nome: string; idade: number; especializacao: string; email?: string; // Propriedade opcional } const instrutor: Instrutor = { nome: "Diego Fernandes", idade: 27, especializacao: "Conhecimento absurdo em Node.js e React!", // Olha o power do Diego aqui! };
  1. Enums: permitem definir um conjunto de valores possíveis.
    1. enum Status { BoraCodar = "bora_codar", FalaDev = "fala_dev", EmMissao = "em_missao" } // Tipando a variável estadoAtual com o enum Status let estadoAtual: Status = Status.EmMissao;
  1. Funções com tipos de retorno: com TypeScript, você também pode definir o tipo de retorno das suas funções.
    1. // Quantidade de projetos de cada curso const projetosReact: number = 15; const projetosNode: number = 8; function somarProjetos(reactProjects: number, nodeProjects: number): number { return reactProjects + nodeProjects; } // Somando os projetos para saber o total que você vai completar! const totalProjetos = somarProjetos(projetosReact, projetosNode);
  1. Classes e modificadores de acesso: TypeScript tem suporte total à programação orientada a objetos, com modificadores como public, private e protected.
    1. class Aluno { public nome: string; protected idade: number; private cpf: string; constructor(nome: string, idade: number, cpf: string) { this.nome = nome; this.idade = idade; this.cpf = cpf; } }

TypeScript e React

Quando usamos TypeScript com React, ele se torna uma ferramenta ainda mais poderosa, pois nos ajuda a evitar bugs comuns em componentes e propriedades. Vamos ver um exemplo simples de componente com tipagem:
interface BotaoProps { texto: string; onClick: () => void; } function Botao({ texto, onClick }: BotaoProps) { return <button onClick={onClick}>{texto}</button>; }
Aqui, garantimos que o componente Botao receba exatamente as propriedades texto e onClick, cada uma com o tipo correto. Qualquer uso incorreto vai ser apontado pelo TypeScript imediatamente.
📽️
Quer ver o TypeScript em ação no desenvolvimento full-stack? No vídeo a seguir, você aprenderá passo a passo como construir um aplicativo completo, integrando o front-end em React com o back-end em Node.js, tudo tipado com TypeScript para garantir segurança e eficiência no código.
Video preview

TypeScript e Node.js

Quando combinamos TypeScript com Node.js, o desenvolvimento de APIs e serviços backend se torna mais seguro e eficiente. O TypeScript traz tipagem estática para o ambiente do Node.js, ajudando a evitar bugs e problemas que só apareceriam em tempo de execução, além de melhorar a legibilidade do código.
Vamos ver um exemplo simples de uma função em Node.js que lida com requisições HTTP e usa TypeScript para garantir a segurança dos dados:
import { Request, Response } from "express"; function criarUsuario(req: Request, res: Response): void { const { nome, idade }: { nome: string; idade: number } = req.body; if (!nome || !idade) { res.status(400).send("Dados incompletos!"); return; } res.status(201).send(`Usuário ${nome} com ${idade} anos criado com sucesso!`); }
Nesse exemplo, garantimos que a função criarUsuario receba um objeto de requisição (Request) e envie uma resposta (Response) tipada corretamente. O TypeScript já indica se houver algum erro na estrutura dos dados recebidos, como se um nome for enviado como número ou se um campo obrigatório estiver faltando.
📽️
Para consolidar todo o conhecimento adquirido e aprender com um especialista no assunto, não deixe de assistir à aula com Diego Fernandes, CTO da Rocketseat. Neste vídeo, você verá na prática tudo o que precisa saber para utilizar o TypeScript de forma eficaz em seus projetos com React e Node.js.
Video preview

Explorando o JSR: a chave para integração perfeita com TypeScript

Se você está interessado em como o ecossistema JavaScript está evoluindo para oferecer uma melhor integração com o TypeScript, vale a pena conhecer o JSR (Registro JavaScript). O JSR é semelhante ao npm, mas otimizado para TypeScript e focado em fornecer pacotes compatíveis com múltiplos ambientes JavaScript.
Alguns destaques do JSR:
  • Padronização de pacotes: o JSR visa padronizar o uso de pacotes em diferentes runtimes JavaScript, como Node.js, Deno e Cloudflare Workers.
  • Suporte a módulos ECMAScript: apoia os módulos ECMAScript como padrão para módulos JavaScript.
  • JSR score: introduz uma avaliação de pacotes com base na compatibilidade com TypeScript, qualidade da documentação e exemplos fornecidos.
🚀
Assista ao vídeo abaixo para entender mais sobre o JSR e como ele aprimora a experiência do desenvolvedor ao integrar-se perfeitamente com o TypeScript:
Video preview
Aprimore a qualidade do seu código com Clean Code! Descubra como aplicar os princípios de Clean Code tanto no Front-end quanto no Back-end para desenvolver e manter códigos de alta qualidade. Aprenda a facilitar a colaboração, a manutenção e a escalabilidade dos seus projetos. Acesse e baixe agora e transforme a forma como você escreve código!

Conclusão

Incorporar o TypeScript nos seus projetos React e Node.js é uma escolha inteligente. Além de melhorar a qualidade do código, ele oferece segurança e facilidade na hora de desenvolver aplicações escaláveis. E se você quer se destacar como desenvolvedor full-stack, aprender TypeScript é um passo essencial.
🚀
Então, bora codar e dominar o TypeScript? Se você está empolgado para começar a aprender, dá uma olhada nas formações de React.js e Node.js da Rocketseat. Lá, você vai aprender tudo o que precisa, com muito código na prática e desafios reais!

Aprenda programação do zero e DE GRAÇA

No Discover você vai descomplicar a programação, aprender a criar seu primeiro site com a mão na massa e iniciar sua transição de carreira.

COMECE A ESTUDAR AGORA