Nesse artigo vou explicar como iniciar um projeto com express utilizando Typescript de forma fácil.

O que é o Express

O Express é um Framework rápido e um dos mais utilizados em conjunto com o Node.js, facilitando no desenvolvimento de aplicações back-end e até, em conjunto com sistemas de templates, aplicações full-stack. Escrito em JavaScript.

Muito popular tanto em grandes empresas quanto na comunidade, o Express facilita a criação de aplicações utilizando o Node em conjunto com o JavaScript, tornando este ecossistema ainda mais poderoso.

Criando o projeto

Iniciando um projeto com NodeJS

Para começar vamos criar um diretório e então iniciamos o projeto:

mkdir express-typescript && cd express-typescript

npm init -y
# ou:
yarn init -y

Perceba que agora temos um package.json no diretório é nele que fica todas as configurações do seu projeto e as dependências, agora ele deve ter algo parecido com:

{
  "name": "express-typescript",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Instalando dependências

Para rodar nosso projeto vai precisar de algumas dependências, para isso vamos instalá-las com:

npm install express && npm install --save-dev @types/express typescript
# ou:
yarn add express && yarn add -D @types/express typescript

Com esses comando instalamos o express que será nosso servidor juntamente com as definições de tipos para utilizarmos com o TypeScript.

Iniciado o typescript

Para iniciar o Typescript basta digitar:

tsc --init
# ou se usou yarn:
yarn tsc --init

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

Antes de criarmos qualquer arquivo vamos criar duas pastas na raiz do projeto, a dist onde ficará nosso projeto compilado em javascript e src onde ficará nosso código em typescript.

Pastas do projeto

dentro da pasta src crie o arquivo server.ts e cole o código abaixo:

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

const app = express();
const route = Router();
const PORT = 3333;

app.use(express.json());

route.get("/", (request: Request, response: Response) => {
  response.json({ message: "hello world with Typescript" });
});

app.use(route);

app.listen(PORT, () => `Server running on port ${PORT}!`);

TypeScript é um super set pra o JavaScript, no começo pode parecer mais difícil mas ele nos ajudar a cometer menos erros.

Editando tsconfig.json

Atribua a pasta Dist ao outDir e pasta src ao rootDir, para isso edite o arquivo tsconfig.json presente na raiz do projeto.

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

Já podemos rodar o projeto com:

npx tsc
#ou
yarn tsc

O código em javascript será gerado na pasta dist.

tsc

Isso quer dizer que já estamos com o Typescript configurado.

Rodando a aplicação

Para rodar aplicação enquanto estamos desenvolvendo vamos instalar um nova dependência que irá escutar nossas alterações e reiniciar automaticamente, basta instalar:

npm install --save-dev ts-node-dev
#ou
yarn add -D ts-node-dev

Esse pacote irá escutar as alterações dos arquivos Typescript e reiniciar o serviço automaticamente.

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 irá escutar as alterações que fizermos no código e reiniciar automaticamente caso seja necessário, também configuramos para ignorar a pasta node_modules, não queremos que ele escute ela.

O script build gera nossa aplicação TypeScript para JavaScript no diretório dist.

Agora é só executar:

npm run dev
#ou
yarn dev

Abra seu navegador e vá em http://localhost:3333 e veja seu projeto rodando.

ExpressJS rodando

No próximo artigo irei criar as rotas e configurar um banco de dados.