Criando uma API SQL para Twitter com Typescript - Parte 1: Configurando o servidor Express

Na Parte 0 - Criando uma API SQL para Twitter com Typescript falei brevemente do nosso projeto, e hoje iremos configurar o nosso servidor Express com TypeScript!

Iniciando o projeto

A primeira coisa que faremos é criar uma pasta, no meu caso criei com o nome twit-sql, então entraremos nela usaremos e daremos o npm init. Para você que gosta de cli, ou não, seguem os comandos:

mkdir twit-sql
cd twit-sql
npm init

Após configurar o projeto inicial, devemos ter um package.json mais ou menos assim:

{
  "name": "twit-sql",
  "version": "0.0.1",
  "description": "Uma API para receber comandos em SQL e voltar dados da API oficial do Twitter.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/augustoasilva/twit-sql.git"
  },
  "keywords": [
    "typescript",
    "twitter",
    "sql",
    "api"
  ],
  "author": "Augusto Silva",
  "license": "MIT",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {

  },
  "devDependencies": {

  }
}

No meu caso como eu tinha o repositório git iniciado, algumas informações vieram nele.

Adicionando o Express

Agora que nosso projeto está criado, vamos adicionar as depências iniciais do projeto em questão.

Para o servidor com Express usaremos o seguinte comando:

npm install --save express body-parser

Por hora iremos somente adicionar o pacote do express com o body-parser, mais à frente iremos adicionar outros pacotes para o nosso servidor. Para testarmos o nosso servidor basta criarmos o arquivo index.js na raiz do projeto e adicionar o seguinte código:

const express = require('express')
const app = express()
const PORT = 3000; // Aqui você pode usar outra porta caso a 3000 esteja sendo utilizada.
app.get('/', (req,res) => res.send('Servidor com Express!'))
app.listen(PORT, () => {
  console.log(`O servidor está rodando em http://localhost:${PORT}`);
})

Agora basta rodar o comando node index.js e acessar a sua página e deve ter o resultado parecido com a imagem abaixo:

Adicionando o Typescript

Pois bem, agora que temos o nosso servidor com express rodando vamos adicionar o Typescript no projeto. Aviso que não estarei utlizando uma instalação global do Typescript, como já vi em alguns tutoriais.

Para adicionarmos o TS no nosso projeto devemos rodar o seguindo comando:

npm install --save-dev typescript ts-node nodemon

Agora explicarei o que cada pacote faz, de maneira resumida:

1. typescript: é a biblioteca padrão que irá compilar os nossos arquivos de extensão .ts em arquivos válidos de javascript;
2. ts-node: é uma biblioteca que irá nos auxiliar para rodar um servidor de desenvolvimento para o nosso projeto typescript.
3. nodemon: é uma biblioteca que irá receber informações do ts-node onde a cada modificação dos nossos arquivos de typescript, irá fazer um hot-reload da nossa aplicação.

Agora o nosso arquivo json deve estar parecendo com algo assim:

  "name": "twit-sql",
  "version": "0.0.1",
  "description": "Uma API para receber comandos em SQL e voltar dados da API oficial do Twitter.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/augustoasilva/twit-sql.git"
  },
  "keywords": [
    "typescript",
    "twitter",
    "sql",
    "api"
  ],
  "author": "Augusto Silva",
  "license": "MIT",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.7",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.5"
  }
}

Para fazer o nosso compilador funcionar, precisamos adicionar o seguinte arquivo tsconfig.json na raíz do nosso projeto da seguinte forma:

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "rootDir": "./",
        "outDir": "./build",
        "esModuleInterop": true,
        "strict": true
    }
}

O que cada item desse arquivo quer dizer? Explico agora!

O compilerOptions é um campo obrigatório que precisa ser especificado. As opções usadas na configuração acima são:

1. target: nos permite especificar a versão Javascript que queremos que o compilador produza;
2. module: nos permite usar um gerenciador de módulo no código Javascript compilado. O commonjs é compatível e é um padrão em Node.js;
3. rootDir: é uma opção que especifica onde os arquivos Typescript estão localizados dentro do nosso projeto;
4. outDir: especifica onde os arquivos compilados serão colocados;
5. esModuleInterop: nos permite compilar módulos ES6 para módulos commonjs;
6. strict: é uma opção que ativa opções estritas de verificação de tipo

Podem haver outras opções de configuração que você deseje adicionar para o compilador Typescript, mas essas são as opções de configuração básicas que iremos utlizar.

Adicionando os arquivos de declaração de tipos

Como sabemos, o Typescript adiciona os tipos ao nosso projeto, fazendo com que o Javascript seja tipado. E para fazer com que as nossas depêndencias sejam habilitadas para o TS, precisamos adicionar os arquivos de declaração de tipos delas através do comando:

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

Convertendo nosso projeto inicial Javascript em Typescript

Pegando aquele nosso arquivo index.js e renomeando-o para index.ts faremos as seguintes alterações no arquivo:

import express from 'express'

const app = express()
const PORT: number = 3000 // Aqui você pode usar outra porta caso a 3000 esteja sendo utilizada.

// daqui para baixo o código permaneceu o mesmo.
app.get('/', (req,res) => res.send('Servidor com Express + Typescript!'))
app.listen(PORT, () => {
  console.log(`O servidor está rodando em http://localhost:${PORT}`)
})

Rodando novamente o nosso servidor com node index.ts:

E agora?

Bom, agora que temos o nosso servidor funcionando com Express + Typescript, o próximo passo é a adição de arquivos de rotas para a Nossa API. Te vejo no próximo artigo, até lá!