Configurando e iniciando projeto Node.js com Typescript
E aíí, como você está 😃 ?
Bom, nesse postzinho legal vou mostrar como eu, com a ajuda dos meus amigos desconhecidos dessa incrível web, configurei e inicializei um projetinho básico em Node.js utilizando Typescript.
Antes de começar pelo começo, vou dar aquela breve introdução sobre o Node.js e também sobre a linguagem Typescript e tal 😉.
Node.js
"O Node.js é um container web de execução de código Javascript. Ele é usado para desenvolvermos projetos com Javascript e disponibilizarmos os mesmos na web."
Typescript
"TypeScript é uma linguagem criada pela Microsoft e é um super conjunto da linguagem JavaScript, que fornece classes , interfaces e a tipagem estática opcional.
Uma das grandes vantagens da TypeScript é permitir que os IDEs proporcionem um ambiente mais rico para detectar erros comuns enquanto você digita o código usando o recurso Intellisense."
Então, eles são isso aí e mais um monte de coisas legais e interessantes, que podem ser aprofundadas nos seus respectivos sites e suas documentações em https://nodejs.org/en/about/ e https://www.typescriptlang.org 😉.
Agora vamos para o desenvolvimento do projeto 🙌.
Criando a pasta para o projeto
Criei uma pasta com o comandomkdir meu-projeto-nodejs-com-typescript-para-um-post-bem-legalzinho-no-medium ou, se você preferir, pode ser só mkdir nodejs-typescript-project 😄.
Entrei na pasta cd <nome-da-pasta> e rodei o comando npm init -y para iniciar um arquivo package.json com algumas configurações padrões para dar início ao projeto.
Instalando o pacote Typescript
Depois, instalei o pacote typescript, com o comandonpm install --save-dev typescript, que vai ser quem vai interpretar nosso código em typescript, no modo de desenvolvimento.
Criando o arquivo tsconfig.json
Também já criei o arquivo tsconfig.json, na raiz do projeto, para configurar as opções para compilar o projeto na linguagem typescript.
Mais informações sobre essas opções, podem ser encontradas no site da linguagem https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Instalando o express
Instalei o express, com o comando npm install express, que é um framework bastante utilizado que possui métodos utilitários HTTP e middlewares.
Instalando os types do express
Instalei também os types do express, em modo de desenvolvimento, que servirá para podermos utilizar o express com typescript, com o comando npm install --save-dev @types/express.
Instalando o body-parser
Instalei o body-parser, que é um middleware que faz o parse do body pra gente, com o comando npm install body-parser.
Instalando o ts-node-dev
Daí instalei o ts-node-dev, para rodar o typescript no modo de desenvolvimento, com o comando npm install --save-dev ts-node-dev .
Instalando o module-alias
Instalei também um pacote bem legal, que ajuda a diminuir a declaração dos caminhos até os arquivos, que é o module-alias, com o comando npm install module-alias e os types dele também, com o comando npm install --save-dev @types/module-alias.
Okay, agora se 'bamos' para o arquivo que inicia as configurações da aplicação.
Criando o app.ts
Criei uma pasta src/ e dentro dela criei um arquivo app.ts com a extensão do arquivo sendo .ts porque é a typescript que vai compilar esse arquivo e os outros, para transformá-los em javascript no momento do build.
Nesse arquivo app.ts implementei uma classe SetupApplication para inicializar algumas configurações do projeto:
Com a utilização da linguagem typescript, podemos utilizar na classe, a definição do tipo de retorno dos métodos, que nesse caso o ficou void, pois não retornam nenhum valor, e também a definição de atributos, como foi definido o atributo privado server , com uma definição de tipo também, que no caso é do tipo Server .
Criando o server.ts
Depois, nessa mesma pasta /src eu criei um arquivo server.ts para ser responsável por inicializar o servidor da aplicação pra gente. Essa separação entre o setup da aplicação e do server ajuda bastante na implementação dos testes automatizados.
Criando o arquivo routes.ts
Depois, criei um arquivo para gerenciar as rotas da aplicação, dentro de /src também, o arquivo routes.ts , que possui uma classe Routes e um método estático define() que recebe um parâmetro do tipo Router e o seu retorno também é do tipo Router ;).
No método define implementei somente uma rota /products que servirá como prefixo para as rotas que serão definidas dentro do arquivo em @modules/Product/Router.
Falando nisso, tem ali a utilização do pacote module-aliasno segundo import import Product from '@modules/Product/Router' , que ajuda na redução do caminho até o arquivo Router lá dentro de app/modules/Product/Router que vou mostrar daqui a pouco como ficou e tal.
Criando o arquivo de configuração para o module-alias.ts
Primeiro vou mostrar a configuração que precisa ser implementada para que o module-alias interprete os nomes definidos para os caminhos até as pastas.
Daí criei um arquivo em src/util/module-alias.ts com o seguinte código:
onde basicamente são adicionados os alias para os caminhos até as pastas, no formato json, sendo a chave o nome para o alias, e o valor o caminho até a pasta desejada, legal né ? 😃
Bom, dito isso, vou para o arquivo onde criei uma rota simples, que retorna algo simples, só para deixar funcionando bonitinho um fluxo de uma requisição até a resposta, beleza?
Criando a rota para /products
Daí criei o arquivo Router.js, dentro de src/app/modules/Product/ para ficar separado por módulo e organizadinho, que será responsável por definir as rotas para esse módulo Product.
Adicionando scripts para executar o server
Bom, agora para rodar o projeto de boas, e poder obter esse json como resposta, para a requisição ao endpoint que criamos, que ficou /products, vamos adicionar os scripts no arquivo package.json para depois podermos rodar o projeto no modo desenvolvimento, e também fazer o build de typescript para javascript 😉.
Então adicionei esses scripts no arquivo package.json:
onde o comando npm run start vai executar o build do projeto, que irá criar uma pasta /dist na raiz do projeto, que irá conter o código compilado em javascript de todo o projeto, e depois, nesse mesmo comando, é executado o servidor da aplicação a partir do arquivo já compilado em javascript dentro da pasta /dist, o arquivo server.js . Shooww né ? 😃
… e daí, agora sim, rodando no terminal o comando npm run dev vai iniciar o servidor da aplicação em modo de desenvolvimento, que está definido para rodar na porta 3333.
E daí no navegador de sua preferência ou no Postman é possível fazer a requisição do tipo GET para a url http://localhost:3333/products e, se tudo der certo (se não der, tudo bem, faz parte 😃), é para retornar o json que definimos como resposta dessa rota, mais ou menos assim:
E aí, bomboou 😃 ?
Ufaa, acho que é isso 🙌 .
Espero ter conseguido colaborar com algo nesse post e se você tiver alguma sugestão, crítica construtiva ou opinião sobre o conteúdo desse post, por favor, comente aí ou entre em contato comigo para trocarmos uma ideia e aprendermos juntos 😉.
Fica aqui o meu muito obrigado, um sorriso de gratidão, um forte abraço e bons estudos!
Ahh, o link do repositório onde desenvolvi esse projeto está aqui
👉 https://github.com/naigueldev/nodejs-typescript-project 👈
