Iniciando um projeto NodeJs , Express com Typescript

Olá galera hoje estou iniciando uma série de posts com o tema Node Js com Typescript. Nesse primeiro post iniciaremos o projeto e toda sua estrutura inicial . Vamos nessa !

Video Tutorial

Parte 1 - Criando o projeto

Vamos abrir nosso terminal e digitar .

 bash
mkdir nodets 
cd nodets

Agora temos uma pasta para exclusiva do nosso projeto e nosso próximo passo e iniciar uma aplicação node como o seguinte comando.

   yarn init -y 

se preferir pode usar o npm

   npm init -y 

Agora temos um arquivo que se chama package.json
esse arquivo contém e salva as dependencias que o projeto nescessita e tambem os scripts que o Nodejs executa depois que nós o definimos .

no terminal escreva :

cat package.json 

teremos o seguinte retorno

{
  "name": "nodets",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Part 2 instalando as dependências

Toda aplicação necessita de pacotes específicos conforme a necessidade do escopo do projeto, no nosso caso iremos instalar o Express .

O Express é um framework que irá nos auxiliar na criação de rotas, tratamentos de erros e com os verbos HTTP (get, put , update e delete ) entre outras facilidades .

No terminal escreva :

yarn add express && yarn add -D @types/express

Estamos instalando o Express e as definições de typos do Express porque nosso projeto será feito em typescript e requer
typagem .

feito isso escreva no terminal novamente

cat package.json 

teremos o seguinte retorno

{
  "name": "nodets",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.11"
  }

Perceba que agora temos duas novas propriedades uma dependências que são as dependências do projeto e a outra é devDepedencies que são as dependências utilizadas para desenvolvimento no yarn usamos a flag -D e no npm utilizamos a flag --save-dev para diferenciarmos as dependências de desenvolvimento

Agora já temos o Express instalado vamos adicionar o suporte a Typescript na nossa aplicação, iremos instalar o TypeScript como dependência de desenvolvimento.

No terminal escreva :

  yarn add -D typescript

Perceba que no nosso arquivo package.json em DevDepedencies temos 2 propriedades .

 "devDependencies": {
    "@types/express": "^4.17.11",
    "typescript": "^4.2.4"
  }

Parte 2 Adicionando Suporte ao Typescript

Com o Express e o TypeScript instalados precisamos criar um arquivo de configuração do Typescript esse arquivo terá algumas configurações para escrevermos nosso código em Typescript e ele converter para Javascript quando iremos fazer uma compilação (buildar) e deixar nossa aplicação na linguagem que o servidor entenda que no caso é o Javascript.

Vamos criar esse arquivo de configuração .

No terminal escreva :

 bash

yarn tsc --init

esse comando criou um arquivo de json de configuração chamado : tsconfig.json.

Agora vamos Falar de estrutura inicial de pastas depois voltamos ao novo tsconfig

Abra seu Projeto no seu editor de escolha eu vou usar o Vs Code .

Criaremos duas pastas com nome do src e dist a pasta src será a pasta principal da aplicação e a pasta dist será o nosso código compilado em JavaScript

Na pasta src escreveremos todos nossos códigos em TypeScript .

No seu editor dentro da pasta src crie um arquivo server.ts

No arquivo server.ts escreva o código abaixo será nosso inicio para entendermos algumas coisas .

import express from 'express'

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

const app = express();

const route = Router()

app.use(express.json())

route.get('/', (req: Request, res: Response) => {
  res.json({ message: 'hello world with Typescript' })
})

app.use(route)


app.listen(3333, () => 'server running on port 3333')

Perceba que usamos Import definimos typagems nos parâmetros da Rota essa é uma pequena diferença entre utilizar o TypeScript ao invés do Javascript . O TypeScript é um super set pra o JavaScript que nos ajuda a cometer menos erros e sermos mais organizados e mais fácil de debbugar, pode parecer Mais verboso no inicio mas com o tempo de adaptação verá que é bem mais produtivo .

Parte 3 Editando o tsconfig.json

Iremos configurar duas propriedades na configuração uma será a pasta de raiz do projeto e a outra a pasta onde irá todo código todo código JavaScript Gerado .

Deverá ficar assim o Arquivo :

{
 "outDir": "./dist",
 "rootDir": "./src"
}

Atribua a pasta Dist ao outDir e pasta src ao rootDir

com isso já podemos fazer nossa primeiro teste e ver se está funcionando o typeScript gerando o JavaScript .

No terminal escreva

 yarn tsc 

Olhe em seu Editor e perceba que ele gerou um código Javascript na pasta dist 👏🏻 👏🏻 👏🏻 👏🏻, ótimo já estamos com o TypeScript configurado.

Parte 4 Subindo o servidor e escutando as alterações

Agora nós podemos configurar nossa aplicação para enquanto codamos ela se auto reinicia e assim podemos trabalhar sem a necessidade de ficar subindo toda a hora a aplicação
No terminal escreva

 yarn add -D ts-node-dev

Esse pacote permita escutar as alterações dos arquivos Typescript em tempo real .

Depois de instalado vamos ao nosso package.json e adicionaremos essas propriedades .

"scripts": {
  "dev": "ts-node-dev --inspect --transpile-only --ignore-watch node_modules src/server.ts",
  "build": "tsc"
},

o Script dev esta escutando em tempo real as alterações no nosso server.ts que é o arquivo principal que carrega toda os demais módulos da aplicação e também definimos para ignorar todos os arquivos que estão na pasta node_modules isso ganhamos performance e também não há necessidade de alterarmos esses arquivos.

O Script build ele simplesmente gera nossa aplicação TypeScript para JavaScript no diretório dist que foi toda a configuração que fizemos na etapa anterior .

Agora é so ir ao terminal e executar

yarn dev 

abra seu navegador e pronto sua aplicação e ambiente de desenvolvimento está pronto 😻 !

É isso espero que gostem , no próximo post pretendo iniciar uma aplicação com rotas e controllers com TypeScript

Até mais ! Obrigado.