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