Como configurar TypeScript em um projeto Node.js

Esse tutorial está usando a versão 18.16.0 do Node.js

Primeiro eu criei uma pasta chamada typescript. Na pasta iniciei o projeto node rodando o comando abaixo passando o argumento -y para pular o menu interativo que pergunta o nome do pacote, versão, ... etc

npm init -y

Criei uma pasta src para colocar meu código typescript

mkdir src

Criei 2 arquivos .ts dentro da pasta src, um main.ts e outro Person.ts

touch src/main.ts src/Person.ts

A estrutura ficou assim até o momento:

No arquivo Person.ts criei uma classe simples e no arquivo main.ts importei a classe e criei um objeto dela e printei no console.log

Se tentarmos rodar o arquivo main.ts ele irá dar erro

Porém esse erro que deu ainda não é sobre o typescript, mas sim sobre o uso de importação em modulo que utilizamos. Por padrão o node usa o tipo de importação e exportação o "commonjs" que tem a sintaxe:

const Person = require('./Person')

Para mudarmos a importação para module, devemos ir no package.json e adicionar uma linha "type" e colocar como module, repare que no print a baixo ele já avisa que o "Default value" é o commonjs

Mudando para "module" e rodando o arquivo main.ts novamente, agora sim o erro é que o node não reconhece o arquivo .ts

Para conseguirmos rodar o TypeScript preciamos de instalar um pacote chamado typescript, para isso rode o comando abaixo:

npm install typescript

Após instalarmos o pacote devemos rodar o seguinte comando para criar um arquivo de configuração do typescript

npx tsc --init

Feito isso ele deverá ter criado o arquivo tsconfig.json

Agora temos 2 formas de conseguir rodar o nosso código typescript

1 - Se digitarmos o comando:

npx tsc

O comando npx tsc transpila todo arquivo .ts para um arquivo .js

Dessa forma conseguimos rodar o arquivo main.js que foi transpilado

Só que dessa forma o código ficará muito bagunçado. Esclua o 2 arquivos .js gerado e vá para o arquivo tsconfig.json que iremos fazer uma mudança.

No arquivo tsconfig.json descomente a linha que se refere ao outDir e coloque o caminho ./dist

Após fazer isso e rodar novamente o comando

npx tsc

O código .js que foi transpilado irá ser gerado separadamente dentro da pasta dist, não mais misturando com o código presente na pasta src/

Agora que aprendemos transpilar o código typescript e rodar o código podemos criar um script no package.json para facilitar esse projeto. Crie um script

"start": "tsc && node dist/main.js"

Onde ele irá transpilar todo código .ts para js e depois rodar o o arquivo main.js dento da pasta dist

Feito isso se a gente digitar no terminal

npm run start

Ele irá rodar o script de transpilação e já rodar o nosso código

Para agilizar o nosso desenvolvimento existe uma outra biblioteca que é muito mais fácil de usar para o dia a dia. Para isso instale o pacote:

npm install ts-node

Após o ts-node instalado para conseguir rodar o código .ts é só digitar no terminar

npx ts-node src/main.ts

O ts-node transpila o código para javascript em tempo de execução e já roda sem precisar fazer nada:

Uma outra vantagem de ter o ts-node instalado é que caso você ter a biblioteca nodemon instalada ela também vai rodar o arquivo .ts sem esforço

Vamos testar, primeiro instale o nodemon

npm install nodemon

Depois execute o código utilizando o nodemon

npx nodemon src/main.ts

Também funcionou, lembrando que o nodemon para arquivo .ts só funciona se você também tiver a biblioteca ts-node instalada.

Ficarei muito feliz se esse post tenha ajudado você de alguma forma, deixo meu muito obrigado se chegou até aqui. Tem alguma dica, pergunta ou feedback ? Deixe nos comentários