Criando uma API Node.js com Express e TypeScript

rodrigozan

rodrigozan

Posted on April 27, 2023

Criando uma API Node.js com Express e TypeScript

Vamos criar uma API com Node.js utilizando o framework Express e o superset TypeScript.

O Node.js tem conquistado cada vez mais espaço, desbancando linguagens como JAVA e PHP. Não que uma seja melhor que a outra. O Node.js trouxe uma visão de integração na criação de aplicações web, na qual é possível usar apenas uma linguagem (o JavaScript) em todas as camadas (frontend, backend e mobile).

Porém, o JavaScript sempre vai perder para linguagens fortemente tipadas como o JAVA. É por isso que o TypeScript foi criado.

E hoje vamos utilizar o TypeScript na criação de uma API de cadastro de usuários e livros.

Fica comigo que vamos ver neste artigo:

  • O que é TypeScript;
  • Porque usar TypeScript em projetos Node.js;
  • Como instalar o TypeScript
  • Instalando o TypeScript no projeto

O que é TypeScript

TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft. É um superconjunto sintático estrito de JavaScript e adiciona tipagem estática opcional à linguagem (segundo o Wikipédia).

Facilitando a vida, o TypeScript é um conjunto de ferramentas que nos permite escrever código JavaScript de forma mais eficaz e elegante (fiquei até orgulhoso desse parágrafo rs).

Definição oficial

Vamos ver a definição do site da documentação do TypeScript. Afinal, nada melhor que a definição oficial:

O TypeScript adiciona sintaxe adicional ao JavaScript para oferecer suporte a uma integração mais estreita com seu editor. Detecta erros no início do seu editor.
Um resultado em que você pode confiar
O código TypeScript é convertido em JavaScript, que é executado em qualquer lugar em que o JavaScript é executado: em um navegador, em Node.js ou Deno e em seus aplicativos.
Segurança em escala
O TypeScript entende JavaScript e usa inferência de tipos para fornecer ótimas ferramentas sem código adicional.

Vamos entender então porque usar TypeScript em Node.js.

Porque usar TypeScript em projetos Node.js

A primeira vantagem que vejo é a detecção de erros no editor de código. Como o próprio site oficial.

Tipagem estática vs tipagem dinâmica

Uma das vantagens mais defendidas na comunidade é a possibilidade de usar tipagem estática, enquanto JavaScript só nos possibilita usar tipagem dinâmica.

Os tipos são valores que podem ser manipulados em um programa. A maioria das linguagens trabalha com 4 tipos primitivos de valores (e suas variações):

  • INT
  • FLOAT
  • BOOLEAN
  • TEXT

O JavaScript utiliza como tipos primitivos embutidos linguagem: number, string, boolean e symbol ("nome simbólico. É utilizado na criação de propriedades únicas nos objetos, entre outras funções).

Linguagem com tipagem estática

São linguagens de programação onde o programador precisa declarar, ou tipar o valor de cada dado inserido em um sistema. Como exemplo, temos o JAVA e o #NET.

Linguagem com tipagem dinâmica

Linguagens de programação onde pode-se declarar o valor de um dado sem a necessidade de especificar de que tipo é esse dado. Como o JavaScript e o PHP.

Orientação a objetos

Segundo Hugo Roveda:

A POO é um paradigma de programação que se propõe a abordar o design de um sistema em termos de entidades, os objetos, e relacionamentos entre essas entidades.

O Hugo ainda declara que as seis principais vantagens de se usar o paradigma de orientação a objetos. A orientação a objetos, em seu parecer, é:

  • confiável;
  • oportuno;
  • ajustável;
  • extensível;
  • reutilizável e;
  • natural.

Você pode acessar o artigo do Hugo e conferir seu ponto de vista acessando este link depois de terminar este artigo hein rs.

Classes

Uma classe é a representação de um objeto do mundo real. É uma estrutura que descreve as pessoas. Pessoas têm características, que chamamos atributos; e ações, que chamamos métodos.

Por exemplo, podemos representar uma pessoa através de uma classe. A classe pessoa terá as características, que chamamos de atributos: nome, sobrenome e CPF. Algo que todas as pessoas (no Brasil) do mundo real (ou a maioria) possuem.

Também terá as ações de andar, respirar, comer, beber, estudar. Todas essas ações são métodos dentro de uma classe.

Herança

A herança é muito utilizada na orientação a objetos. Com a herança podemos criar uma nova classe a partir de uma já existente.

Por exemplo, temos uma classe pessoa. Toda pessoa tem nome, sobrenome, CPF. A partir da classe pessoa, criamos a classe estudante. Esse estudante terá registro estudantil, turma, sala, notas. E continua sendo uma pessoa, pois ainda tem nome, sobrenome e CPF.

Encapsulamento

Ativamos o encapsulamento utilizando setters e getters. O encapsulamento permite que o código acesse as características protegidas de uma classe.

Classes abstratas

Uma classe abstrata é um tipo é especial de classe. Ela deve ser herdada, mas não pode ser instanciada. Ou seja, nas classes objetas não temos objetos criados a partir de sua instanciação. Muito usada quando queremos criar objetos a partir de subclasses, e não de classes pai.

Interfaces

Uma interface na linguagem de programação Java é um tipo abstrato usado para descrever um comportamento que as classes devem implementar (oi Dinovo Wikipédia).

Em TypeScript é similar. Uma interface descreve como um objeto deve parecer. Na Interface teremos somente as definições de métodos e propriedades. Mas não sua implementação.

Resumindo, as vantagens do TypeScript frente o JavaScript são:

  • detecção inicial de erros no editor de códigos;
  • tipagem estática;
  • orientação a objetos;
  • classes;
  • herança;
  • encapsulamento;
  • classes abstratas;
  • interfaces.

Como instalar o TypeScript

Para instalar o TypeScript de forma global, ou seja, para que você possa usar os comandos do superset em qualquer diretório, basta digitar no terminal ou prompt de comando:

npm install --global typescript
Enter fullscreen mode Exit fullscreen mode

ou, se você prefere o Yarn:

yarn add --global typescript
Enter fullscreen mode Exit fullscreen mode

Instalando o TypeScript no projeto

Vamos criar o diretório para trabalharmos nossa API, iniciar nosso projeto e instalar o Express e o TypeScript.

Vou utilizar o Yarn, mas você pode usar o NPM tranquilamente:

mkdir booksgram
cd booksgram
yarn init
Enter fullscreen mode Exit fullscreen mode

Crie na raiz do seu projeto um arquivo chamado yarnrc.yml. Acrescente o seguinte conteúdo:

nodeLinker: node-modules

Se quiser começar a usar o Yarn, te recomendo o seguinte artigo:

Vamos adicionar as dependências do projeto.

yarn add express 
yarn add -D typescript ts-node-dev
Enter fullscreen mode Exit fullscreen mode

O TypeScript e o ts-node-dev são dependências de desenvolvimento, ou seja, elas não farão parte do projeto quando ele for para produção. O ts-node-dev fornece um executável que usaremos no lugar do Node para rodar o código TypeScript.

Vamos também adicionar os tipos do Express para não termos nenhum tipo de conflito entre o Express e o TypeScript.

yarn add -D @types/express
Enter fullscreen mode Exit fullscreen mode

Crie os diretórios src e dist na raiz do projeto.

mkdir src
mkdir dist
Enter fullscreen mode Exit fullscreen mode

Também na raiz do projeto, crie o arquivo tsconfig.json com o seguinte conteúdo:

{
  "compilerOptions": {
    "target": "es2016",  
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",       
    "esModuleInterop": true,                    
    "forceConsistentCasingInFileNames": true,
    "strict": true,            
    "skipLibCheck": true
  }
}
Enter fullscreen mode Exit fullscreen mode

No package.json, adicione os seguintes scripts:

"scripts": {
    "dev": "ts-node-dev --inspect --transpile-only --ignore-watch node_modules src/server.ts",
    "build": "tsc"
}
Enter fullscreen mode Exit fullscreen mode

Agora crie o arquivo server.ts dentro do diretório src.

cd src
touch server.ts
Enter fullscreen mode Exit fullscreen mode

Adicione o seguinte conteúdo nele:

import express from 'express'

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

const app = express()

const route = Router()

app.use(express.json())

route.get('/', (req: Request, res: Response) => {
  res.json({ message: 'Wow! My first project in TypeScript!!!' })
})

app.use(route)

const PORT = 3030

app.listen(PORT, () => `Server running on port ${PORT}`)
Enter fullscreen mode Exit fullscreen mode

Agora rode o comando yarn dev no terminal. Atenção: certifique-se de estar no diretório raiz. Se estiver dentro do diretório src, retorne ao diretório raiz utilizando o comando cd .. no terminal.

Após digitar yarn dev no terminal, acesse o endereço localhost:3030 no navegador. A mensagem Wow! My first project in TypeScript!!! deve aparecer.

Parabéns! Você rodou com sucesso seu primeiro projeto TypeScript!

Próxima etapa

Muito bem pessoas programadoras que amam JavaScript. No próximo artigo vamos colocar a mão na massa e começar a criação de nossa API.

Iremos refatorar nossa aplicação e criar modelos, controles, serviços e rotas para cadastrarmos nossos usuários e livros.

Calma, relaxa. O próximo artigo já está quase prontinho e será postado amanhã.

Abraços e até a próxima.

💖 💪 🙅 🚩
rodrigozan
rodrigozan

Posted on April 27, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

De uma página para vários components
javascript De uma página para vários components

November 28, 2024

Estruturas de Dados: Lista
datastructures Estruturas de Dados: Lista

November 27, 2024

Validação e Sanitização em Aplicações Web
braziliandevs Validação e Sanitização em Aplicações Web

November 26, 2024