Hoje vamos falar um pouco de uma nova linguagem de programação que resolve um problema muito específico! Como desenvolver aplicações em grande escala com JavaScript?
O JavaScript foi originalmente construído para ser uma linguagem de script no lado do cliente para páginas Web’s e por muitos anos foi limitado a scripts manipuladores de eventos (DOM).Com isso, o JavaScript tem muitas limitações necessárias para escrever e manter aplicações em larga escala, de modo que os componentes da aplicação funcionem de forma independente e que possam ser mantidos e modificados de forma produtiva.
Com o HTML 5, ficou meio que ‘implícito’ desenvolvermos e entregarmos aplicações cada vez mais ricas para os usuários. Devido essa necessidade, a criação de aplicações em JavaScript de grande escala é uma tarefa difícil e bem trabalhosa! Mas não se preocupem, pois o TypeScript torna esta tarefa bem mais fácil.
Afinal, o que é TypeScript? TypeScript é uma linguagem de programação criada e mantida pela Microsoft. Foi projetada para o desenvolvimento de grandes aplicações em JavaScript tanto no lado cliente ou servidor (Node.js). Basicamente é um subconjunto de JavaScript que acrescenta tipagem de objetos (opcional), estrutura de classes e é totalmente baseada em programação orientada a objeto.
A tipagem estática lhe permite realizar muitas operações de refatoração avançadas, como renomeação global, pesquisa de referência e auto-complete de código.
Uma coisa muito interessante é que TypeScript começa e termina com JavaScript. Isso mesmo, quem já lidou com SASS sabe como isso é importante, já que SASS é totalmente compátivel com CSS. Você pode simplesmente pegar um código .js e jogar em uma arquivo .ts e sair adaptando o que quiser. Já quem está habituado a trabalhar com o CoffeScript, sabe que não é muito divertido ficar convertendo código de um ponta para outra.
Bom, vamos deixar um pouco de lado a teoria e por a mão na massa!
PRÉ-REQUISITOS PARA FUNCIONAMENTO DO TYPESCRIPT
NODE para MAC-OS
brew install node
NODE para distribuições LINUX
Você precisa instalar duas dependências antes de instalar o Node.js e NPM (Ruby e GCC).
Ruby 1.8.6 ou mais recente e GCC 4.2 ou mais recente
Ubuntu ou distribuições Linux baseadas em Debian, execute o seguinte comando em seu terminal:
sudo apt-get install onda build-essential git m4 ruby texinfo libbz2-dev libcurl4-openssl-dev libexpat-dev libncurses-dev zlib1g-dev
Para distribuições Linux baseadas Fedora execute o seguinte comando em seu aplicativo de terminal:
sudo yum groupinstall ‘Ferramentas de desenvolvimento’ && sudo yum install onda ruby git m4 texinfo bzip2-devel curl-devel expat-devel ncurses-devel zlib-devel
Homebrew
Homebrew é um gerenciador de pacotes originalmente para o Mac, mas ele já foi portado para o Linux como Linuxbrew, tornando a instalação de software mais open-source (como Node) tão simples como escrever: brew install node
Você pode aprender mais sobre Homebrew no site Homebrew e Linuxbrew no site da Linuxbrew.
Para instalar o Homebrew para Linux, abra o aplicativo de terminal e cole na linha de comando:
rubi -e “$ (onda -fsSL https://raw.githubusercontent.com/Homebrew/linuxbrew/go/install)”
Uma vez que Linuxbrew esteja instalado, você precisará adicionar as 3 linhas seguintes ao seu .bashrc ou arquivo .zshrc:
export PATH = “$ HOME / .linuxbrew / bin: $ PATH”
export MANPATH = “$ HOME / .linuxbrew / share / man: $ MANPATH”
INFOPATH exportação = “$ HOME / .linuxbrew / share / info: $ INFOPATH”
INSTALAÇÃO DO TYPESCRIPT:
npm install -g typescript
O -g significa que ele será instalado em seu sistema globalmente, para que o compilador TypeScript possa ser usado em qualquer um dos seus projetos.
Teste se o TypeScript está instalado corretamente, digitando tsc -v no seu terminal ou prompt de comando. Você deverá ver a versão do TypeScript na tela ex:
message TS6029: Version 1.6.2.
Para obter ajuda sobre possíveis argumentos você pode digitar: -h tsc ou apenas tsc
EXECUTANDO E COMPILANDO EM TYPESCRIPT
O comando abaixo compila um arquivo .ts para .js, gerando assim um novo arquivo app.js
tsc app.ts
Para compilar vários arquivos utilize o seguinte comando:
tsc app.ts another.ts outher.ts
O resultado será a criação de três novos arquivos app.js another.js e outher.js
Utilize o caracter * para compilar todos arquivos ts de uma determinada pasta:
tsc *.ts
Gerando um único arquivo .js para sua aplicação: isto reduz um número significativo de requisições http, para isso utilize –out conforme abaixo:
tsc *.ts –out app.js
Ficou um pouco trabalhoso ficar sempre recompilando na mão esses arquivos, certo? Desta forma então utilizamos o –watch
tsc *.ts –out app.js –watch
Toda vez que existir uma atualização, o TypeScript irá recompilar de forma automática todos os arquivos .ts para .js em um único arquivo chamado app.js
TIPAGEM
Como dito anteriormente, a tipagem de objetos é opcional, o que torna a linguagem mais flexível, onde você não precisa tipar tudo. Te dá toda liberdade para tipar o que quiser e onde for mais necessário. Vejamos um exemplo:
var meuNome:string = "Lucas Rodrigues";
function printNome(nome: string){
console.log(nome);
};
printNome(meuNome);
DEFININDO UM INTERFACE
interface Contato {
nome: string,
email: string,
telefone: string
}
var agenda: Contato[] = [];
var contato = {
nome: 'Lucas Rodrigues',
email: 'lucas.rodrigues@redspark.io',
telefone: '11 5506-5154'
};
agenda.push(contato);
Umas das vantagens é que quando estivermos digitando o agenda.push, a IDE terá opção para utilizar o auto-complete e mostrar os atributos utilizados na interface.
Outra vantagem é que quando estivermos definindo um objeto do tipo ‘contato’ e esquecermos de definir algum de seus atributos, a IDE poderá nos avisar:
Argument of type ‘{nome: string, email:string}’ is not assignable to parameter of type ‘Contato’. Property ‘telefone’ is missing…
DEFININDO CLASSES
interface Coordenada {
x: number,
y: number
}
Class Monstro{
nome: string,
posicaoInicial: Coordenada
constructor(nome,posicaoInicial){
this.nome = nome;
this.posicaoInicial = posicaoInicial;
}
}
var monstro = new Monstro('Alienigena',{x: 0, y: 0});
ou definir de seguinte forma
interface Coordenada {
x: number,
y: number
}
Class Monstro{
constructor(public nome: string,public posicaoInicial: Coordenada){
}
}
var monstro = new Monstro('Alienigena',{x: 0, y: 0});
Espero que este post tenha despertado a vontade de se aprofundar mais no aprendizado e quem sabe dar o pontapé incial para que vocês construam suas próprias aplicações utilizando TypeScript.
Compartilhe isso:
