Iniciando um projeto NodeJs , Express com Typescript
Tags: node, typescript, javascript
Published: 2021-05-21 19:17:23

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmafpv4xptsd9fez3wa6.png)](https://www.youtube.com/watch?v=qG394_8FmCc)

## 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. 

```bash
   yarn init -y 
``` 
se preferir pode usar o npm 

```bash
   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 : 
```bash

cat package.json 

```  

teremos o seguinte retorno 

```json
{
  "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 :

```bash

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 

```bash

cat package.json 

```

teremos o seguinte retorno 

```json
{
  "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 :

```bash
  yarn add -D typescript

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

```json
 "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 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnoiopr7q2pd96xozeui.png)

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx30cbrwvp2sw8s9bd20.png)

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

```typescript

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  : 

```json
{
 "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

```bash 
 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. 
 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz48ocjn773uygkkx9a9.png)

## 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

```bash 
 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 . 

```json
"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

```bash

yarn dev 

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69iail6v2t7tnc1mp67m.png)

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


Até mais ! Obrigado.