WebFadoni, programação, notícias, tudo sobre o mundo da programação e da tecnologia, você vai encontrar aqui no WebFadoni.

WebFadoni
10/Jun/2022 00:54

Como criar aplicativo ExpressJS com Typescript

WebFadoni

Express.js, ou simplesmente Express, é uma estrutura de aplicativo de back-end para Node.js, lançada como software livre e de código aberto sob a licença MIT. Ele é projetado para criar aplicativos da Web e APIs. Ele foi chamado de estrutura de servidor padrão de fato para Node.js. (fonte: wikipédia )

Para que possamos facilmente construir api para frontend com node js usando este framework!

Ok, antes de prosseguirmos com o tutorial, primeiro, quero listar os pacotes que usei para criar este projeto

express — este é o módulo Node.js que usaremos para construir a api
body-parser — middleware de análise de corpo do Node.js
cors — este é o pacote node.js para fornecer um middleware Connect / Express que pode ser usado para habilitar o CORS com várias opções.
helmet — capacete é um pacote Node.js que ajuda a proteger seu aplicativo expresso definindo vários cabeçalhos http
morgan — morgan é um pacote Node.js que nos ajuda a saber quem está solicitando api para nosso aplicativo ExpressJS
nodemon — nodemon é uma ferramenta que ajuda a desenvolver aplicativos baseados em node.js reiniciando automaticamente o aplicativo de nó quando alterações de arquivo no diretório são detectadas.
ts-node — ts-node é um mecanismo de execução TypeScript e REPL para Node.js.
@types/express, @types/body-parser, @types/cors, @types/helmet, @types/morgan, @types/node — Este pacote contém definições de tipo

Ok, vamos começar instalando todos os pacotes necessários

$ npm instalar express body-parser cors capacete morgan

espere até terminar e instale as dependências dev

$ npm install ts-node typescript nodemon @types/express @types/body-parser @types/cors @types/helmet @types/morgan @types/nodemon --save-dev

em seguida, crie um arquivo chamado app.ts e preencha-o com este código

import express from 'express';
import { createServer } from 'http';
import bodyParser from 'body-parser';
import cors from 'cors';
import helmet from 'helmet';
import morgan from 'morgan';

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

const app = express();
const server = createServer(app);
const port = process.env.PORT || 3000;

app.use(express.json());
app.use(bodyParser.json());
app.use(cors());
app.use(helmet());
app.use(morgan('dev'));

app.get('/', (req: Request, res: Response) => {
res.status(200).json({
status: 'success',
message: 'Welcome to the API',
});
});

server.listen(port, () => console.info(`Server running on port ${port}`));

deixe-me explicar um por um:

estes são todos os pacotes que precisamos para criar um servidor

import express from 'express';
import { createServer } from 'http';
import bodyParser from 'body-parser';
import cors from 'cors';
import helmet from 'helmet';
import morgan from 'morgan';

esta é a definição de tipo para definir os parâmetros req e res

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

Estas são as variáveis ​​que precisamos para criar nosso aplicativo ExpressJS

const app = express();
const server = createServer(app);
const port = process.env.PORT || 3000;

esta é a rota expressa que criamos para este tutorial

app.get('/', (req: Request, res: Response) => {
res.status(200).json({
status: 'success',
message: 'Welcome to the API',
});
});

e este para iniciar o servidor ouvindo a porta que declaramos anteriormente

server.listen(port, () => console.info(`Server running on port ${port}`));

Ok, agora abra o arquivo package.json e adicione um novo script

{
"name": "node-starter",
"version": "0.0.0",
"scripts": {
"start": "nodemon app.ts"
},
"dependencies": {
"body-parser": "^1.20.0",
"cors": "^2.8.5",
"express": "^4.17.3",
"helmet": "^5.0.2",
"morgan": "^1.10.0"
},
"devDependencies": {
"@types/body-parser": "^1.19.2",
"@types/cors": "^2.8.12",
"@types/express": "^4.17.13",
"@types/helmet": "^4.0.0",
"@types/morgan": "^1.9.3",
"@types/node": "^17.0.25",
"@types/nodemon": "^1.19.1",
"nodemon": "^2.0.15",
"ts-node": "^10.7.0",
"typescript": "^4.6.3"
}
}

por último, inicie seu servidor digitando npm startseu terminal/cmd, depois abra http://localhost:3000e você receberá esta resposta

{"status":"success","message":"Welcome to the API"}