No post anterior, eu falei sobre as vantagens de se usar typescript em seus novos projetos e hoje vamos aprender como configurar um projeto NodeJs com TypeScript. Então vem comigo e vamos pôr a mão na massa.

Começando

Primeiramente vou criar uma pasta chamada primeiro-projeto-typescript e depois disso vamos dar o comando yarn init -y para criar o package.json, após isso abra o VS code com o comando code.

Agora com o terminal aberto no VS Code, nós vamos instalar a dependência do typescript como dependência de desenvolvimento.

Feito isso iremos criar uma pasta chamada src e dentro iremos criar um arquivo chamado index.ts, agora dentro desse arquivo conseguimos usar algumas features mais recentes como import mesmo estando na versão 12 do node que não suporta esse tipo de importações, sendo obrigado a usar o require.

Vamos começar adicionando o express como o seguinte comando yarn add express e depois vamos importar no nosso arquivo index.ts. O código e o seguinte:

import express from 'express';

const app = express();

app.get('/', (request, response) => {
  return response.json({ message: 'Hello word' });
});

app.listen(3333, "Server is launch!");

Se você reparar bem, quando digitamos app. o intellisense do vs code não mostrou o autocomplete, sendo que isso funcionava corretamente quando utilizamos javascript.

Isso ocorre porque era o vs code que fazia isso, pois o vs code e usa o typescript e quando você instalava uma dependencia no seu projeto, ele instalava junto a tipagem referente a essa dependecia que fornecia as sugestões utilizado pelo intellisense.

Por tanto, agora que utilizamos typescript no nosso código, esse download da tipagem não ocorre mais. Dessa forma nós mesmo devemos sempre instalar a tipagem referente a dependencia que estamos utilizando, o proprio vs code indica qual tipagem devemos instalar, basta passar o mouse em cima do import do express para ver. No terminal digite yarn add @types/express para instalar a tipagem do express.

Rodando a aplicação

Antes de tentar rodar a aplicação nós devemos criar o arquivo de configuração do typescript, para isso basta digitar no terminal na raiz do projeto a seguinte linha yarn tsc —init.

Pronto, agora você vai ver que foi criado um arquivo tsconfig.ts, abra o arquivo e descomente a linha onde tem a configuração “outdir” e coloque da seguinte forma “outDir”: “./dist” e na configuração “rootDir” deixe com o seguinte conteúdo “rootDir”: “./src”.

Agora se dermos o comando yarn tsc, ele vai criar a pasta dist e nela vai jogar os nossos arquivos .ts convertidos para .js e utilizando a mesma estrutura que criamos no nosso projeto. Depois disso, se você der o comando node dist/index.js a sua aplicação vai rodar perfeitamente.

Deixando mais rápido

Quando estamos no ambiente de desenvolvimento, se a todo momento utilizarmos o comando yarn tsc. A nossa produtividade será baixa, isso ocorre pois o yarn tsc vai criar os arquivos para publicação de uma nova build e isso pode ser bem demorado dependendo do tamanho do projeto. A forma mais rapida de continuamos testar enquanto programos e utilizando o ts-node-dev, para instala-lo utilize o comando yarn add ts-node-dev -D.

Depois disso configure o arquivo packege.json com a seguinte configuração.

"scripts": {
    "build": "tsc",
    "dev:server": "ts-node-dev --inspect --transpile-only --ignore-watch node_modules src/server.ts"
  },

Agora basta digitar no terminal yarn dev:server que a sua aplicação irá rodar normalmente e com live watch ativado.

Caso tenha gostado desse post, não deixe de compartilhar e acessar outros posts relacionados na sessão NodeJs do blog e caso tenha dúvidas acesse a documentação oficial do typescript em https://www.typescriptlang.org/.