Como iniciar um projeto TypeScript
Published: 2023-03-25 04:45:35

Os requisitos básicos para que possamos utilizar TypeScript em um projeto são

1. [Instalar NodeJS](#instalar-nodejs)
1. [Criar um diretório (pasta) para seu projeto](#criar-um-diret%C3%B3rio-para-seu-projeto)
1. [Configurar o NPM no projeto](#configurar-o-npm-no-projeto)
1. [Adicionar _TypeScript_ como dependência do projeto](#adicionar-typescript-como-depend%C3%AAncia-do-projeto)
1. [Configurar `tsconfig.json` no projeto](#configurar-raw-tsconfigjson-endraw-no-projeto)
1. [Nosso arquivo principal](#nosso-arquivo-principal)
1. [Nossos scripts](#nossos-scripts)
1. [Concluindo](#concluindo)

Então vamos lá.

## Instalar NodeJS
Para instalar o NodeJS recomendo acessar o [site oficial](https://nodejs.org/pt-br), faça o download da última versão LTS e instale em seu computador.


## Criar um diretório para seu projeto

Isso pode ser feito utilizando a interface gráfica do seu sistema operacional ou pelo terminal de comandos e caso opte pelo terminal, abra seu VSCode e em seguida abra o terminal clicando no menu superior 
"_Terminal > New terminal_" e então vamos para o comando

> *_Dica_*
> Não é uma boa prática o uso de caracteres especiais como acentos ou espaços para evitar erros de codificação. O ideal é que sejam utilizadas apenas letras e hífen para separação entre palavras. 

```sh
mkdir nome-do-projeto
```

Após criado, vamos abrir o projeto recém criado no _VSCode_

```sh
code nome-do-projeto -r
```

O parâmetro `-r` indica que queremos abrir usando a mesma janela, evitando termos 2 janelas do VSCode abertas.

## Configurar o NPM no projeto
O NPM (**N**ode **P**ackage **M**anager) é o gerenciador de pacotes e com ele podemos usar bibliotecas escritas por outras pessoas ou publicar nossas próprias bibliotecas (escritas em JavaScript ou TypeScript) para que outros projetos usem.

Bibliotecas usadas são dependências, e se tornam necessárias para que nosso código funcione, além disso também devemos informar suas respectivas versões.

Quando executamos o comando `npm install` estamos fazendo download destas dependências.

Também definimos `scripts` úteis. São comandos que deixarão nosso fluxo de desenvolvimento mais prático e fazemos isso configurando um objeto `{ "chave": "valor" }` onde a chave é um apelido que podemos escolher como desejarmos, já o valor será o comando que será executado quando invocado através do comando `npm run chave`

Ao executar

```sh
npm init
```

Responderemos algumas perguntas

1. Nome do projeto, padrão é o nome do diretório
1. Versão do projeto, padrão é `1.0.0`
1. Descrição do projeto, padrão em branco
1. Ponto de entrada principal, o padrão é `index.js`
1. Comando para execução de testes
1. Link do repositório git, padrão em branco
1. Palavras chaves, padrão em branco
1. Autor, padrão em branco
1. Licença, padrão é [ISC](https://opensource.org/license/isc-license-txt/) mas recomendo a [GPLv3](https://www.gnu.org/licenses/gpl-3.0.html) [Tradução](http://licencas.softwarelivre.org/gpl-3.0.pt-br.html)


## Adicionar _TypeScript_ como dependência do projeto

```sh
npm i -D typescript
```

O parâmetro `-D` indica que será uma dependência necessária apenas durante o desenvolvimento e não depois que estiver em produção. Este é o caso do TypeScript, visto que enviamos para produção apenas o código JavaScript gerado a partir do que escrevemos em TypeScript.

## Configurar `tsconfig.json` no projeto

Este arquivo indica que esse diretório é a raiz do projeto TypeScript e especifica os arquivos raiz e as configurações de compilação necessárias para o projeto, mais informações [neste link](https://www.typescriptlang.org/pt/docs/handbook/tsconfig-json.html)

## Nosso arquivo principal
Vamos cria-lo com o seguinte comando

```sh
code src/index.ts
```

Em seguida vamos salva-lo.

Agora que temos nosso arquivo no diretório `src`, vamos alterar nosso `tsconfig.json` descomentando as linhas `48`, `50` e `56` e configurando desta forma

`tsconfig.json`
```json
  "sourceMap": true,
  "outDir": "./dist",
  "sourceRoot": "./src",
```

Isso define que o compilador deve procurar arquivos no diretório `"src"` e o resultado deverá ser salvo no diretório `"dist"`.

## Nossos scripts
Um padrão muito utilizado são os comandos `"dev"` e `"build"`, faremos isso alterando o objeto `"scripts": {}` no arquivo `package.json`, com os comandos `tsc` e `tsc -watch`, respectivamente.

`package.json`
```json
  "scripts": {
    "build": "tsc",
    "dev": "tsc -watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

A partir de agora podemos desenvolver utilizando o comando `npm run dev` e toda vez que alterarmos algum arquivo dentro do diretório `"src"`, o compilador do TypeScript irá entrar em ação, colocando o resultado no diretório `"dist"`.

## Concluindo

Para saber se está tudo funcionando, adicione um log

`src/index.ts`
```ts
console.log('foi')
```

E execute

```sh
npm run build
```

Provavelmente foi criado um diretório `"dist"` com um arquivo `index.js` e agora executamos

```sh
node dist/index.js
```

Se você viu escrito `"foi"` no seu terminal, tivemos êxito e temos nosso projeto configurado!