DEV Community

Cover image for Iniciando um projeto NodeJs , Express com Typescript
Rogerio Orioli
Rogerio Orioli

Posted on • Updated on

Iniciando um projeto NodeJs , Express com Typescript

#node #typescript #javascript

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

Iniciando um projeto NodeJs , Express com Typescript

Parte 1 - Criando o projeto

Vamos abrir nosso terminal e digitar .

mkdir nodets 
cd nodets
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

se preferir pode usar o npm

   npm init -y
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

teremos o seguinte retorno

{
  "name": "nodets",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

 "devDependencies": {
    "@types/express": "^4.17.11",
    "typescript": "^4.2.4"
  }
Enter fullscreen mode Exit fullscreen mode

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 :


yarn tsc --init
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

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

Alt Text

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')
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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"
},
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Até mais ! Obrigado.

Top comments (7)

Collapse
 
andrecastelo profile image
André Castelo •

Boa! Uma única coisa que eu mudaria - o pacote ts-node-dev não é uma boa, ele é rápido mas não dá pra confiar. Não tem checagem de tipo e muitas vezes ele não atualiza corretamente. Tem três alternativas boas pra usar ao invés dele:

  • ts-node + swc + nodemon
  • ts-node + nodemon, com transpileOnly no ts-node
  • nodemon + tsc --incremental

mais info aqui -> stackoverflow.com/questions/379794...

Collapse
 
alexalannunes profile image
Alex Alan Nunes •

sensacional

Collapse
 
luscas profile image
Lucas •

Show!

Collapse
 
moniquealtero profile image
Monique Altero •

Ficou ótimo, consegui fazer em 5 minutos!

Collapse
 
netogermias profile image
Neto Geremias •

Cara valeu, não deixe de postar mais

Collapse
 
gustavoph profile image
Gustavoph •

Excelente post Rogerio, irá me ajudar muito a iniciar com typescript!

Collapse
 
rogeriorioli profile image
Rogerio Orioli •

show feliz em ajuda-lo !

Read next

jonrandy profile image

Misconceptions About Closures

Jon Randy 🎖️ -

dr_anks profile image

Mastering the Art of Software Design: An Overture to Object-Oriented Design

An Architect -

jsworldconference profile image

🔥We're Back and Stronger Than Ever!🔥

JSWORLD Conferences -

delisrey profile image

React Query : staleTime vs cacheTime

DELI -