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:
- typescript: é a biblioteca padrão que irá compilar os nossos arquivos de extensão .ts em arquivos válidos de javascript;
- ts-node: é uma biblioteca que irá nos auxiliar para rodar um servidor de desenvolvimento para o nosso projeto typescript.
- 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:
- target: nos permite especificar a versão Javascript que queremos que o compilador produza;
- 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;
- rootDir: é uma opção que especifica onde os arquivos Typescript estão localizados dentro do nosso projeto;
- outDir: especifica onde os arquivos compilados serão colocados;
- esModuleInterop: nos permite compilar módulos ES6 para módulos commonjs;
- 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á!
Top comments (4)
Showww aguardando novos capítulos! :)
Opa Alex, que bom que gostou! Já estou fazendo a parte de roteamento. E nela ja vou trazer um bônus de como testar rotas de API com o Michael + Chai, bem simples ate!
Cara, pode arrochar!
Eu tinha começado um projetinho de api com nodejs + mysql para testar minha habilidades em banco de dados. Porém estou achando muito simples e amador.
Ai achei seu artigo hoje e já vou refatorar pra TypeScript pra ficar mais lindo. hehe.
Aposto que o seu vai ser muito massa e vou seguir cada passo :)
Demorou um pouco mais do que imaginei, mas saiu a parte 2 aqui: dev.to/augustoasilva/criando-uma-a...