Configurando TypeScript

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:

$ 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:

$ 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:

$ 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:

{
  "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:

$ 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:

$ ./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:

{
  "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:

"scripts": {
    "start": "tsc && node dist/app.js"
},

Logo, o arquivo inteiro ficará da seguinte forma:

{
  "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:

$ 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:

$ mkdir src

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

$ touch src/app.ts

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

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:

$ npm start

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

$ servidor rodando na porta 3000

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

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!