DEV Community

Gabriel_Silvestre
Gabriel_Silvestre

Posted on

6 2

Set-up: Express com TypeScript

Tabela de Conteúdos


TypeScript

Referências

Instalação

Por se tratar do desenvolvimento de uma API com Express e TS, devemos instalar o TypeScript como dependência do projeto, ou globalmente.

npm i -g typescript  # instalação global na máquina
npm i -D typescript  # instalação como dependência de desenvolvimento
Enter fullscreen mode Exit fullscreen mode

Voltar ao topo


Requisitos

@types/node

O primeiro requisito que precisamos para começar a desenvolver aplicações Express com TypeScript é a tipagem do Node.js, essa que, por padrão, não é integrada a ferramenta.

npm i -D @types/node
Enter fullscreen mode Exit fullscreen mode

Express + @types

O segundo requisito é o Express em si juntamente com sua tipagem, que assim como a do Node.js não vem junto do pacote principal, sendo necessário instalá-la manualmente.

npm i express
npm i -D @types/express
Enter fullscreen mode Exit fullscreen mode

ts-node-dev

Essa é uma ferramente para desenvolvimento que realiza a compilação e inicialização do servidor a cada alteração realizada nos arquivos, aumentando a produtividade. Seu funcionamento é similar ao nodemon, porém além de reiniciar o servidor automaticamente, também compila os arquivos.

npm i -D ts-node-dev  # é uma dependência opcional, porém facilita MUITO o desenvolvimento
Enter fullscreen mode Exit fullscreen mode

Voltar ao topo


Scripts

O que são?

São comandos definidos por nós para a execução de determinada ação, a inicialização de um servidor de desenvolvimento, ou a execução de testes, por exemplo.

Scripts recomendados

Ao desenvolver uma aplicação Express com TS, podemos definir alguns scripts para facilitar o desenvolvimento.

dev

O script "dev" é comumente responsável por iniciar um servidor de desenvolvimento, sendo que normalmente esse servidor possui hot reload, ou seja, sempre que alterarmos nosso código, o servidor será reiniciado automaticamente para refletir tal mudança.

// package.json

{
  "dev": "ts-node-dev --inspect --transpile-only --ignore node_modules --respawn src/server.ts",
}
Enter fullscreen mode Exit fullscreen mode

test

O script test, como o nome da a entender, é responsável pela execução dos testes da aplicação, sendo que o comando utilizado nesse script irá alterar dependendo da ferramenta utilizada, no exemplo abaixo o mocha é o framework de testes.

// package.json

{
  "test": "mocha ./tests/**/*$NAME*.test.js --exit"
}
Enter fullscreen mode Exit fullscreen mode

Caso prefira escrever os testes em TypeScript também, o seguinte script pode ser utilizado:

// package.json

{
  "test": "mocha -r ts-node/register/transpile-only __tests__/**/*.spec.ts",
}
Enter fullscreen mode Exit fullscreen mode

start

O script start por padrão contém todos os comandos necessários para iniciar a aplicação em ambiente de produção.

// package.json

{
  "start": "tsc && node dist/server.js"  // irá compilar e depois inicializar o servidor a partir do arquivo compilado
}
Enter fullscreen mode Exit fullscreen mode

build

E por fim o script build é responsável por "construir" nossa aplicação, ele deve receber comandos responsáveis por tal ação. No caso, como estamos focando em uma aplicação Express simples com TS, o nosso processo de build será somente compilar o código, mas em aplicações mais complexas, que utilizem webpack por exemplo, os comandos seriam outros.

// package.json

{
  "build": "tsc"
}
Enter fullscreen mode Exit fullscreen mode

Voltar ao topo


Resumo

Instalação de dependências

npm i express
Enter fullscreen mode Exit fullscreen mode
npm i -D typescript @types/node @types/express ts-node-dev
Enter fullscreen mode Exit fullscreen mode
npm i -D mocha chai chai-http sinon  # dependências opcionais* para testes
Enter fullscreen mode Exit fullscreen mode

Definição de scripts

{
  "scripts": {
    "start": "npm run build && node dist/server.js",
    "dev": "ts-node-dev --inspect --transpile-only --ignore node_modules --respawn src/server.ts",
    "test": "mocha ./tests/**/*$NAME*.test.js --exit",
    "build": "tsc"
  }
}
Enter fullscreen mode Exit fullscreen mode

Voltar ao topo


Links Úteis

Voltar ao topo

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (2)

Collapse
 
eltonmorenocl profile image
Elton Moreno

Parabéns Gabriel! ficou muito top

Collapse
 
gabrielhsilvestre profile image
Gabriel_Silvestre

Valeu Elton!!

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

👋 Kindness is contagious

If this post resonated with you, feel free to hit ❤️ or leave a quick comment to share your thoughts!

Okay