DEV Community

Gabriel_Silvestre
Gabriel_Silvestre

Posted on

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

Top comments (2)

Collapse
 
eltonmorenocl profile image
Elton Moreno

Parabéns Gabriel! ficou muito top

Collapse
 
gabrielhsilvestre profile image
Gabriel_Silvestre

Valeu Elton!!