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

Por que aprender TypeScript?

Exemplo prático

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);

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);

Vamos adicionar Node.js ao planejamento?

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);

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:

const nome: string = "Rocketseat";
const idade: number = 10;

2. Interfaces: ajudam a definir o formato de objetos e a garantir que eles tenham os campos corretos.

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!
};

3. Enums: permitem definir um conjunto de valores possíveis.

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;

4. Funções com tipos de retorno: com TypeScript, você também pode definir o tipo de retorno das suas funções.

// 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);

5. Classes e modificadores de acesso: TypeScript tem suporte total à programação orientada a objetos, com modificadores como public, private e protected.

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

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.

TypeScript e Node.js

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.

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

• 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:

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