Setup NodeJS + Typescript para iniciantes

AugustoTI — Sat, 03 Dec 2022 21:05:40 +0000

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 😁

DEV Community: AugustoTI

Setup NodeJS + Typescript para iniciantes

Criando o nosso ambiente inicial

Configurando o Typescript no projeto

Gerando um build do seu projeto