Configurando TypeScript
Tags: typescript, developer, javascript, express
Published: 2020-05-10 19:13:07

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ghv2cqj1wnm1nll4l8km.jpg

title: Configurando TypeScript
published: true
description: Configurando projeto com typescript
tags: #typescript, #developer, #js, #express,
---

Até o momento o `JavaScript` é a linguagem de programação utilizada nos navegadores, isso acaba sendo um dos fatores para que sua popularidade e facilidade de uso se torne muito grande. Outro fator importante da linguagem é o facilidade de começar a desenvolver, não há muitas configurações para o ambiente de desenvolvimento. 

Como o `JavaScript` é uma linguagem de tipagem dinâmica, acaba herdando os problemas  de que todas as linguagens de programação com tipagem dinâmica possuem, um exemplo disso são os *bugs* por tipagem.

O `TypeScript` é um `superset`, ou seja, é uma linguagem que estende os recursos atuais do `JavaScript`, adicionando a possibilidade de usar tipos estáticos no seu código. Uma das principais vantagens do uso do `TypeScript` é a sua capacidade de identificar erros no código antes mesmo da sua execução, isso acaba tornando uma aplicação mais coerente sem *bugs* em produção.

Como os navegadores executam somente código `JavaScript`, é necessário fazer um processo de conversão do código `TypeScript` para o formato `js`.

## Início

Para dar inicio a um projeto com `TypeScript` é necessário ter o `nodeJs` e o `npm` instalados. Após isso, no terminal execute o comando a seguir:

````shell
$ npm install -g typescript
```

O comando executado instala de forma global o `TypeScript`. Dessa forma será possível executar comandos do `TypeScript`.

Em seguida crie um diretório com o nome do projeto que desejar e inicie o projeto com o `npm`:

```shell
$ mkdir projeto 
$ cd projeto
$ npm init -y
```

A flag `-y` serve para que não seja necessário preencher as informações sobre o projeto, ela é opcional.

## Instalando dependências

Para nosso projeto executar código `TypeScript` é necessário a instalação das seguintes dependências:

````shell
$ npm install -D typescript
$ npm install -D tslint
```

A flag `-D` serve para que as dependências sejam instaladas no modo de desenvolvimento, pois elas serão usadas só para desenvolvimento. 

##Configurando TypeScript

O `TypeScript` usa como base para suas configurações um arquivo chamado `tsconfig.json`, neste arquivo ficam contidas informação para que no momento de compilação do `TypeScript` ele saiba quais configurações seguir. Na raiz do projeto, você deve criar o arquivo com as seguintes informações:

```json
{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}
```

Segue abaixo uma breve explicação das configurações acima:

* `module`: Determina o método de geração de código do módulo. O node usa o `commonjs`;
* `target`: Determina qual vai ser a versão da especificação de código `js` de saída;
* `moduleResolution`: Ajuda o compilador a descobrir a que se refere uma importação;
* `outDir`: Especifica o local que serão gerados os arquivos `js` após a transpilação, o nome comum que é usado é `dist`.

Caso não deseje criar o arquivo `tsconfig.json` manualmente, há a possibilidade de gerar automaticamente com o comando abaixo:

```shell
$ tsc --init
```
Para saber sobre mais opções do `tsconfig` basta acessar a documentação oficial no link abaixo:

- https://www.typescriptlang.org/docs/handbook/compiler-options.html 

Em seguida vamos gerar o `tslint`. O `tslint` se trata de uma ferramenta para análise de código, ela verifica erros de legibilidade, manutenção e funcionalidade. Execute o seguinte comando:

```shell
$ ./node_modules/.bin/tslint --init
```
Após a execução do comando abra o arquivo `tslint.json` recém-gerado e adicione a regra `no-console`: 

```json
{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "no-console": false
  },
  "rulesDirectory": []
}
```
Por padrão o `linter` `TypeScript` impede o uso de `console` para depuração, a regra adicionada serve para revogar a regra padrão de `no-console`. 

## Execução/Transpilação

Voltando nossa atenção para o arquivo `package.json`, vamos criar um `script` para execução e transpilação do código que a aplicação terá.

O script será o seguinte: 
```json
"scripts": {
    "start": "tsc && node dist/app.js"
},
```
Logo, o arquivo inteiro ficará da seguinte forma:

```json
{
  "name": "projeto",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.16.1",
    "tslint": "^5.12.1",
    "typescript": "^3.3.3"
  },
  "dependencies": {
    "express": "^4.16.4"
  }
}
```

No `json` acima foi especificado o diretório `main` da aplicação, em seguida na sessão de `scripts`, foi usado o comando `tsc` que irá fazer a transpilação do código `TypeScript` para `JavaScript`, criando o arquivo `.js` no diretório de acordo com o que foi configurado no arquivo `tsconfig.json` no campo `outDir`.
Em seguida, está sendo executado o comando `node`, que irá executar o arquivo `dist/app.js` com o código já transpilado.

##Criando e executando um servidor Express básico

Instale as seguintes dependências:

```shell
$ npm install express
$ npm install -D @types/express
``` 
O `express` é uma biblioteca muito utilizada para roteamento de aplicações web. A segunda dependência serve para que o `TypeScript` saiba quais os tipos de classes do `express`.

Agora crie a seguinte pasta no diretório raiz da aplicação: 

```shell
$ mkdir src
```

Após a pasta criada, crie o seguinte arquivo:

```shell
$ touch src/app.ts
```

Com o arquivo `app.ts` aberto em um editor de sua preferência, digite o seguinte código nele:

```ts
import express from 'express';

const app = express();
const porta = 3000;
app.get('/', (req, res) => {
  res.send('Hello world!');
});
app.listen(porta, err => {
  if (err) {
    return console.error(err);
  }
  return console.log(`servidor rodando na porta ${porta}`);
});
```
O código cria um servidor `node`, que atenderá na porta 3000.

Basta agora executar o comando abaixo no seu terminal: 

```shell
$ npm start
```

Se for executado com sucesso o servidor `node`, você deverá se deparar com a seguinte saída no seu terminal:

```shell
$ servidor rodando na porta 3000
```

Acesse a url `http://localhost:3000` no seu navegador e deverá aparecer a seguinte mensagem: 

```shell
Hello World!
```

## Referências

- https://www.typescriptlang.org/docs/home
- https://palantir.github.io/tslint/
- https://expressjs.com/pt-br/guide/routing.html

Obrigado por ler até aqui!