Setup NodeJS + Typescript para iniciantes

Você que está começando a aprender a Typescript e se perguntou como integrar essa ferramenta em seus projetos NodeJS. Eu venho aqui lhe guiar em como configurar um bom Setup inicial passo a passo.

Criando o nosso ambiente inicial

Crie em uma pasta/diretório em algum local do seu computador utilizando alguma Interface gráfica ou pelo terminal ( Recomendo você usar o "Git Bash" se estiver usando Windows ).

mkdir node-with-typescript cd node-with-typescript 

Com seu editor de código preferido, abra a pasta/diretório ( Eu irei utilizar o Visual Studio Code ).

# Você tem que está dentro da pasta "node-with-typescript" code . 

por fim, inicialize seu projeto com o NPM ( ou com Yarn se preferir ).

# NPM npm init -y # yarn yarn init -y 

Você verá seu package.json criado. Ótimo, isso é o ponto de start para nosso setup 🚀.

Configurando o Typescript no projeto

Agora que temos nosso setup inicializado com Node, precisamos instalar o Typescript e configurar o ambiente para que o Node possa entende-lo.

Vamos começar instalando o Typescript e suas tipagens para o Node

# NPM npm i -D typescript @types/node # yarn yarn add -D typescript @types/node 

Depois, crie o arquivo tsconfig.json na raiz do seu projeto com as seguinte configurações:

{ "exclude": ["node_modules", "dist"], "include": ["src"], "compilerOptions": { "target": "ES2020", "isolatedModules": true, "moduleResolution": "Node", "resolveJsonModule": true, "baseUrl": "./", "allowSyntheticDefaultImports": true, "strict": true, "outDir": "./dist", "emitDecoratorMetadata": true, "experimentalDecorators": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "sourceMap": true, "lib": ["ESNext"], "strictPropertyInitialization": false, "skipLibCheck": true, "paths": {}, "module": "CommonJS", "noImplicitAny": false, "noFallthroughCasesInSwitch": false, "typeRoots": ["./src/@types", "./node_modules/@types"] } } 

OBS: Se você quiser saber mais sobre o que cada configuração acima faz, de uma olhada na documentação do próprio Typescript.

Em seguida, crie uma pasta na raiz do seu projeto chamada src e um arquivo de entrada qualquer ( poderia ser index.ts )

// src/index.ts export {} console.log('Hello Dev :D') 

Se você tentar executar esse arquivo com node, provavelmente, vai ser gerado um erro na seu console.
Isso acontece pois o NodeJS apenas consegue interpretar arquivos .js. Para resolvemos isso, basta instalar um pacote que possibilitara entender arquivos .ts

# NPM npm i -D ts-node-dev # yarn yarn add -D ts-node-dev 

Agora é só criar um script no package.json e executar o comando no terminal.

{ // ... "scripts": { "dev": "tsnd --clear --ignore-watch node_modules --transpile-only --respawn src/index.ts", }, // ... } 

# NPM npm run dev # yarn yarn dev 

Pronto :) Seu NodeJS já consegue entender o Typescript 🥳🎇

Gerando um build do seu projeto

Ok, você já configurou seu setup ( por enquanto, de uma forma bem básica ) com Typescript. Mas, como já havia sido dito, o Node só entende arquivos .js, você vai usar Typescript apenas quando você esta desenvolvendo.

Em produção, você vai transformar seu código Typescript para Javascript e o Node vai entender ele nativamente.

Já configuramos o nosso tsconfig.json com as configurações de compilação. Apenas vamos criar dois script no package.json e executar no terminal.

{ // ... "scripts": { "dev": "tsnd --clear --ignore-watch node_modules --transpile-only --respawn src/index.ts", "build": "rm -rf ./dist && tsc", "start": "node ./dist" }, // ... } 

# NPM npm run build npm start # yarn yarn build yarn start 

Vai ser gerado na raiz do seu projeto, uma pasta chamada dist contendo o nosso código Typescript compilado para Javascript e pronto para produção 😎

Se eu te ajudei em algo, comente 😁