Microsoft TypeScript

Primeiro programa com Visual Studio 2012.

Por Jaime Peña Tresancos - Tradução CRV


Publicado em: 28/1/13
Valorize este artigo:
 
TypeScript é uma extensão da linguagem JavaScript desenvolvida pelo prestigioso criador/programador Anders Hejlsberg, que já possui um destacado currículo de linguagens de programação, entre eles, os tão importantes Tubo Pascal, Delphi e C#.

No presente artigo trataremos o essencial da nova linguagem de programação e desenvolveremos um exemplo, baseando-nos no ambiente de programação de Visual Studio 2012.


 

Fontes de informação oficiais

Para mais informação sobre a linguagem podem ajudar, inicialmente, as seguintes fontes oficiais na Internet:
 

 

O mais notável da linguagem

Da própria especificação da linguagem – que se pode obter do endereço URL que demos mais acima-, se desprende e assim ressaltamos o seguinte:
  1. Se trata de un super conjunto de JavaScript
  2. Cada programa TypeScript tem seu correspondente em JavaScript e viceversa
  3. Opcionalmente, pode proporcionar um mapeado das fontes que permita sua depuração
  4. Já inclui propostas dadas para ECMAScript em sua versão 6 –a última aprovada é a 5.1-, como são as classes e os módulos –veja mais abaixo-
  5. Já inclui a inferência de tipo na declaração de variáveis e funções. Se trataria de uma das colunas vertebrais da nova linguagem –note seu próprio nome-
  6. Define declarações ambiente que são visíveis no âmbito do arquivo TS, mas não se propagam no arquivo JS correspondente, para assim poderem se assimilar a declarações explícitas em navegadores ou em bibliotecas específicas, como por exemplo JQuery
  7. A linguagem em si é debilmente tipada –tipificado, se se prefere- e se permitem declarações em tempo de execução, de modo que não se atém a uma rigidez de declarações tais como em C# ou Java
  8. Um módulo é um objeto totalmente anônimo, tudo o que se encontre dentro dele estará oculto do mundo exterior, a menos que se torne visível de maneira explícita. Dentro se podem definir variáveis, funções, objetos, classes e interfaces. No arquivo correspondente JS se traduzirão em componentes de um objeto encapsulado
  9. Uma interface é um conjunto de declarações de tipo, sem implementações de conteúdo; por exemplo declarações de simplesmente o tipo de variáveis e funções –porém só isso, o tipo-. São de validade exclusiva em tempo de compilação e sua utilidade principal reside na documentação e validação do tipado –ou tipificação- correto(a) das declarações de variáveis, funções, …
  10. O suporte de classes abarca bastante do que caberia esperar –dentro de sua simplicidade, que não é momento de tratar-, herança, acessibilidade pública e privada e sobrecarga, basicamente

 

Um exemplo baseando-nos em Visual Studio 2012

Para fazer desenvolvimentos com TypeScript não necessitamos mais que o compilador em linha de comandos e um editor de textos, como poderia ser o modesto Bloco de notas; logicamente, para um melhor e mais cômodo trabalho nos alegrará saber que podemos, já no momento presente, apoiar-nos emVisual Studio, em suas versões 2012, tanto as profissionais quanto as gratuitas –Express-. Nós passaremos a implementar um exemplo com este entorno visual.
Em primeiro lugar temos de instalar o complemento –plug-in- de desenvolvimento de TypeScript para Visual Studio 2012 em suas diversas versões. Se trata de uma tarefa simples na que primeiramente deveremos ir ao site de Internet:

http://www.microsoft.com/en-us/download/details.aspx?id=34790

Uma vez instalado, a partir do entorno de desenvolvimento de Visual Studio 2012 criaremos um novo projeto como é costume.

Porém, em vez de selecionar um predeterminado, na área de busca escrevemos Typescript.

Na área de novos projetos selecionamos HTML Application with TypeScript –uma aplicação HTML standard, simplesmente, baseada em um documento HTML simples e JavaScript, codificado com TypeScript- lhe damos o Nome desejado e clicamos no botão Aceitar.

Já de volta no entorno de trabalho de Visual Studio 2012, encontramos que foram criados quatro arquivos que comentaremos a seguir:

  • apps.tc: o arquivo TypeScript de trabalho
  • apps.js: o arquivo equivalente JavaScript, sobre o que não deveríamos trabalhar
  • apps.css: a folha de estilos da aplicação
  • default.html: o documento HTML principal da aplicação

Clicamos duas vezes sobre apps.ts para editá-lo. Ao mesmo tempo se abre a árvore que nos deixa ver o arquivo apps.js equivalente da solução –também poderíamos trabalhar sobre ele, mas romperíamos a sequencia de compilação do processo; não devemos fazer isso-.

Modificaremos o arquivo apps.ts segundo nossos interesses. No nosso exemplo será para adequá-lo a nosso idioma. Inicialmente codifica uma sequencia de comandos para mostrar a data atual em formato inglês UTC.

Selecionamos todo o seu conteúdo e os substituímos pela seguinte lista:

class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;

constructor (element: HTMLElement) {
this.element = element;
this.element.innerText += "Agora estamos a: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toLocaleDateString();
}

start() {
this.timerToken = setInterval(() => this.span.innerText = new Date().toLocaleDateString(), 500);
}

stop() {
clearTimeout(this.timerToken);
}

}

window.onload = () => {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};

Da mesma maneira, no arquivo default.html selecionamos seu conteúdo e o substituímos pela lista mais abaixo:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML Aplicação</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="app.js"></script>
</head>
<body>
<h1>TypeScript HTML Aplicação</h1>

<div id="content"/>
</body>
</html>

Por último, no arquivo app.css poderemos fazer nossas modificações pertinentes, por exemplo, fixar uma cor de fundo do documento:

body
{
font-family: 'Segoe UI', sans-serif;
background-color: yellow;
}

span {
font-style: italic
}

Finalmente, clicamos sobre o botão de Internet Explorer –ou do navegador que tenhamos instalado por padrão- na barra de ferramentas-,ou então pressionamos a tecla F5.

Na caixa de diálogo que se abre, "Depuração não habilitada", poderemos selecionar:

  • Agregar um novo arquivo Web.config e realizar uma depuração
  • Executar sem depuração, tal como se tivéssemos pressionado a combinação de teclas Ctrl+F5
  • Tomada a decisão, terminaremos clicando em "Aceitar" e se mostrará nosso resultado no navegador de Internet por padrão que tenhamos selecionado.


 






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato