Setup NodeJS + Typescript para iniciantes
Tags: node, typescript, beginners
Published: 2022-12-03 21:05:40

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 ).

```bash
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 ).

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

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

```bash
# 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

```bash
# 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:

```json
{
  "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](https://www.typescriptlang.org/tsconfig) 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` )

```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`

```bash
# 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.

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

```bash
# 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.

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

```bash
# 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 😁