Combinando TypeScript com Express: Tipagem para Rotas e Middleware

18/09/2024

Por Que Usar TypeScript com Express?

O Express é um framework popular para criar APIs e aplicativos web no Node.js. Quando combinado com TypeScript, você pode garantir a segurança de tipos ao manipular rotas, middleware e respostas HTTP, tornando o código mais previsível e menos propenso a erros. O TypeScript oferece tipagem estática, o que ajuda a detectar problemas durante o desenvolvimento, resultando em código mais robusto e fácil de manter.

Configurando TypeScript com Express

Para começar a usar TypeScript com Express, vamos configurar o ambiente de desenvolvimento. Primeiro, crie um projeto Node.js e instale as dependências necessárias.

1. Instalando Dependências

No terminal, execute o seguinte comando para instalar o Express, TypeScript e suas dependências:

npm install express
npm install --save-dev typescript ts-node @types/express @types/node

O pacote express é o framework principal, enquanto @types/express fornece as definições de tipo para o Express e @types/node para o Node.js. O typescript e o ts-node são usados para compilar e executar o código TypeScript.

2. Configurando o tsconfig.json

Crie o arquivo tsconfig.json na raiz do seu projeto com as seguintes opções:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

Essa configuração garante que o TypeScript compile o código para ES6, use módulos CommonJS (padrão no Node.js) e ative a verificação rigorosa de tipos.

Criando uma Rota com Tipagem no Express

Vamos criar uma rota básica no Express usando TypeScript. Primeiro, crie a estrutura do projeto com a pasta src e um arquivo index.ts dentro dela:

1. Código da Rota

No arquivo src/index.ts, adicione o seguinte código para criar uma rota simples:

import express, { Request, Response } from 'express';

const app = express();
const porta = 3000;

app.get('/saudacao', (req: Request, res: Response) => {
  res.send('Olá, mundo!');
});

app.listen(porta, () => {
  console.log(`Servidor rodando na porta ${porta}`);
});

Aqui, estamos criando uma rota GET para /saudacao. Note que usamos os tipos Request e Response do Express, fornecendo tipagem estática para as requisições e respostas HTTP. Isso ajuda a garantir que o código seja mais seguro e previsível.

2. Executando o Servidor

Para executar o servidor, use o ts-node no terminal:

npx ts-node src/index.ts

Agora, acesse http://localhost:3000/saudacao no navegador e verá a mensagem "Olá, mundo!" sendo exibida.

Tipagem para Parâmetros de Rota

Você pode adicionar parâmetros de rota e garantir a tipagem desses parâmetros com TypeScript. Vamos criar uma rota que recebe um parâmetro nome e retorna uma saudação personalizada.

1. Exemplo com Parâmetros de Rota

Adicione o seguinte código à sua aplicação:

app.get('/saudacao/:nome', (req: Request, res: Response) => {
  const { nome } = req.params;
  res.send(`Olá, ${nome}!`);
});

Agora, ao acessar http://localhost:3000/saudacao/Mauro, você verá a mensagem "Olá, Mauro!". O TypeScript garante que o parâmetro nome seja acessado corretamente, evitando erros comuns ao trabalhar com parâmetros de rota.

Criando Middleware Tipados

Os middlewares no Express são funções que processam requisições antes de chegarem às rotas. No TypeScript, você pode tipar corretamente os middlewares para garantir que eles lidem com os tipos corretos de requisição e resposta.

1. Exemplo de Middleware de Autenticação

Vamos criar um middleware simples que verifica se um cabeçalho de autenticação está presente na requisição.

function autenticar(req: Request, res: Response, next: Function): void {
  const token = req.headers['authorization'];

  if (token === '12345') {
    next(); // Autenticação bem-sucedida
  } else {
    res.status(401).send('Não autorizado');
  }
}

Este middleware verifica se o cabeçalho authorization contém o valor correto e, se a autenticação for bem-sucedida, chama a função next para continuar o fluxo. Caso contrário, retorna um erro 401.

2. Aplicando o Middleware

Agora, aplique o middleware à rota de saudação:

app.get('/privado', autenticar, (req: Request, res: Response) => {
  res.send('Bem-vindo à rota privada!');
});

A rota /privado só será acessível se o token de autenticação estiver correto. O TypeScript garante que os tipos de Request e Response sejam corretamente respeitados em todo o middleware e rota.

Usando Interfaces para Definir Tipos Personalizados

Em aplicações maiores, pode ser útil definir interfaces personalizadas para tipos de dados específicos, como o corpo de uma requisição ou a resposta de uma API. Veja como usar interfaces para tipar o corpo de uma requisição.

1. Exemplo de Interface para Requisição

Suponha que estamos lidando com uma API que aceita um objeto Usuario como corpo da requisição. Podemos definir uma interface para garantir que o corpo tenha a estrutura correta:

interface Usuario {
  nome: string;
  email: string;
}

app.post('/usuario', (req: Request, res: Response) => {
  const usuario: Usuario = req.body;
  res.send(`Usuário ${usuario.nome} cadastrado com sucesso!`);
});

Essa tipagem garante que o corpo da requisição contenha os campos nome e email, evitando erros de validação ou inconsistência de dados.

Boas Práticas ao Usar TypeScript com Express

  • Defina Tipos para Parâmetros, Corpo e Respostas: Sempre que possível, defina explicitamente os tipos para parâmetros de rota, corpo da requisição e a resposta da API.
  • Use Interfaces para Dados Complexos: Quando estiver lidando com objetos mais complexos, como usuários, pedidos ou produtos, crie interfaces dedicadas para garantir a consistência dos dados.
  • Aplique Middlewares com Tipagem: Garanta que seus middlewares estejam corretamente tipados, garantindo que a manipulação da requisição e resposta seja feita de forma segura.
  • Separe a Lógica de Rotas: Organize suas rotas e middlewares em arquivos e módulos separados para melhorar a manutenibilidade do projeto.

Conclusão

Combinando TypeScript e Express, você pode criar APIs mais robustas, seguras e fáceis de manter. A tipagem estática oferecida pelo TypeScript garante que rotas, parâmetros e middlewares sejam utilizados corretamente, evitando erros de execução e aumentando a previsibilidade do código. Seguindo boas práticas, como o uso de interfaces e a definição clara de tipos, você pode construir projetos escaláveis e eficientes com Express e TypeScript.