Arquivo da categoria: TypeScript

TypeScript – O superset de JavaScript

Publicado em por

Olá pessoal, já ouviram / leram algo sobre TypeScript?

Sim, é uma novidade, estou escrevendo apenas 9 dia depois da Microsoft ter anunciado a release do preview do TypeScript.

O TypeScript é um superconjunto “superset” do JavaScript, logo escreve-se TypeScript da mesma forma que se escreve JavaScript, todo código JavaScript também é um código TypeScript.

  • O TypeScript não é um Dart, a Microsoft não está tentando substituir o JavaScript.
  • O TypeScript também não é uma resposta da Microsoft ao CoffeeScript, são propostas diferentes, o CoffeeScript é uma linguagem diferente e possui uma sintaxe própria.

Escrever grandes códigos JavaScript é complicado principalmente quando o assunto é ferramental “tooling”, a proposta do TypeScript é facilitar o desenvolvimento em JavaScript já que o TypeScript traz grandes benefícios, tais como:

  • Classes (chega de prototypes)
  • Módulos (ficou mais fácil exportar código)
  • Tipos definidos (são opcionais)
  • Navegação no código fonte (é possível renomear, encontrar referências e definições)
  • Interfaces
  • Refatoração.

Let’s try!
Veja nesse exemplo básico algumas coisas que nunca viu em JavaScript:

Código TypeScript

// Veja uma classe.
class Greeter {
	greeting: string; // Tipo estático
	constructor (message: string) { // Construtor
		this.greeting = message;
	}
	greet() {
		return "Hello, " + this.greeting;
	}
}

var greeter = new Greeter("world");

var button = document.createElement('button')
button.innerText = "Say Hello"
button.onclick = function() {
	alert(greeter.greet())
}

document.body.appendChild(button)

Código JavaScript gerado:

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();
var greeter = new Greeter("world");
var button = document.createElement('button');
button.innerText = "Say Hello";
button.onclick = function () {
    alert(greeter.greet());
};
document.body.appendChild(button);

Resumindo

TypeScript ao meu ver é escrever JavaScript de uma forma melhorada e organizada, em conjunto com o Visual Studio ficou mais fácil navegar e refatorar o código, o resultado é maior produtividade.

O código TypeScript é escrito em um arquivo *.TS, porém ao publicar ou debugar uma aplicação com TypeScript o código TS será transformado em JS.
O ganho é produtividade mesmo, pois todo código produzido ao virar JavaScript não carrega com ele as melhorias citadas (classes, tipagem estática, etc), mas não tem problema, afinal o código a ser trabalhado vai ser sempre o TypeScript e esse permanece da forma que escrevermos.

Todo código TypeScript é JavaScript, podemos então copiar um código JS e colar num arquivo TS e funcionará normalmente, sem necessidade de migração, para projetos existentes esse comportamento é muito bacana, uma vez que ao colar o código JS num TS podemos fazer as melhorias que quisermos (ou nenhuma) e a vida segue normalmente.

O TypeScript é open source, no site oficial é possível brincar em um playground que transforma online TypeScript em JavaScript, podemos até rodar o código gerado (ótimo teste inicial).

Utilizando o TypeScript

A maioria dos desenvolvedores Microsoft tem como IDE de desenvolvimento o Visual Studio e para isso é necessário baixar e instalar um plugin.

O TypeScript funciona em outras plataformas em sistemas operacionais diversos, é suportado pelo Vim, Emacs e Sublime

Outro ponto importante, o Source Mapping, ao debugar um código JS ele é diretamente mapeado para o código TS, isso facilita muito a vida, outros geradores de JavaScript como o próprio CoffeeScript ainda não possuem esse recurso.

No Visual Studio podemos trabalhar com TypeScript criando um projeto HTML Application ou com MVC3 (não entendi por que não MVC4, logo abaixo demonstro como resolver isso).

Suporte para  HTML Application with TypeScript:

Suporte para um template MVC3:

O template “Typescript Internet Application” é apenas um template ASP.NET MVC 3 que permite compilar códigos TypeScript para JavaScript no processo de Build.
Esta configuração de build é feita no arquivo de projeto:

<None Include="Scriptsjquery.d.ts" />
    <TypeScriptCompile Include="Scriptssite.ts" />
    <Content Include="Scriptssite.js">
      <DependentUpon>site.ts</DependentUpon>
    </Content>
 <Target Name="BeforeBuild">
 <Exec
     Command="&amp;quot;$(PROGRAMFILES)
     Microsoft SDKsTypeScript\0.8.0.0tsc&amp;quot;
     @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
 </Target>

O TypeScript não fornece um template para MVC4, mas como mencionei acima, existe uma forma de resolver este problema. Basta criar um template MVC4 padrão e adicionar no arquivo de projeto “.csproject” o seguinte código:

<ItemGroup>
    <TypeScriptCompile Include="$(ProjectDir)***.ts" />
</ItemGroup>
  <Target Name="BeforeBuild">
   <Exec Command="&amp;quot;$(PROGRAMFILES)
   Microsoft SDKsTypeScript\0.8.0.0tsc&amp;quot;
  @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
  </Target>

Assim quando fizer o build do projeto o TypeScript vai ser compilado e o código JavaScript será gerado em arquivos JS automaticamente.

Primeiras impressões

Passei 4 dias aprendendo e utilizando TypeScript, eu gostei, consigo escrever um código mais bonito e organizado, de forma mais rápida e não precisei aprender uma outra linguagem ou sintaxe como seria no caso de utilizar o CoffeeScript.

Atenção ao versionar o código JS gerado, pois em um novo build ele será sobrescrito e ocasionará um erro, já que após versionar o arquivo se torna “read-only”.

Não é de hoje que diversas abordagens tentam esconder o JavaScript, o Google fez isso em 2011, o CoffeeScript faz, o WebForms do ASP.Net, todos geram JavaScript sem que nós nos preocupemos com isso, porém com TypeScript é a forma mais fácil que senti de trabalhar com JavaScript, afinal consigo debugar meu código original com o Source Mapping, mantenho atualizado meus conhecimentos em JavaScript e tenho uma visão mais clara do código que vai ser gerado, afinal JavaScript também é TypeScript.

Espero que tenham gostado, caso queira participar, dar um feedback ou tirar alguma dúvida faça um comentário 🙂

Links úteis

Referências

Bons estudos e até mais pessoal.