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 ocommonjs
; -
target
: Determina qual vai ser a versão da especificação de códigojs
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 arquivosjs
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:
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!
Top comments (0)