Criando uma API SQL para Twitter com Typescript - Parte 1: Configurando o servidor Express
Published: 2021-02-19 00:03:44

Na [Parte 0 - Criando uma API SQL para Twitter com Typescript](https://dev.to/augustoasilva/criando-uma-api-sql-para-twitter-com-typescript-parte-0-97) 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:

```bash
mkdir twit-sql
cd twit-sql
npm init
```

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

```json
{
  "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:

```bash
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:

```javascript
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:

![Print do navegador rodando o servidor express com a mensagem "Servidor com Express!" sendo exibida](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr5i9f0hlkatbmk8lpsu.png)

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

```bash
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:

```json
  "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:

```json
{
    "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:

```bash
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:

```javascript
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`:

![Print do navegador rodando o servidor express com a mensagem "Servidor com Express + Typescript!" sendo exibida](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk0xfa54ssht3g37ao0o.png)

## 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á!