sábado, 4 de fevereiro de 2017

Introdução ao TypeScript

O javascript é uma linguagem muito divertida e fácil de usar, mas as vezes é pode-se sentir falta de utilizar alguns recursos mais “rígidos”, como tipagem forte, herança mais bem definida. São coisas que estão sendo evoluídas na linguagem como o ECMAscript 6[1] e 7[2]. De toda forma, pode não ser possível utilizar os recursos enquanto o executor do javascript algo da aplicação não suportar os novos padrões – por exemplo aplicações web que tem clientes as utilizando em navegadores antigos.
O TypeScript resolve muito bem boa parte do problema, sendo um superset do javascript que transcompila em diferentes versões do javascript – garantindo mais recursos em ambiente de desenvolvimento e sendo mais portável ao transcompilar para diferentes versões do javascript para a execução. Criado em 2011 pela Microsoft ganhou ainda mais aceitação pela comunidade quando o Google o escolheu para escrever o Angular.js 2.
Anders Hejlsberg da Microsoft comenta sobre as evoluções do javascript no ECMAScript 2015 e a demora de adoção pelo ecosistema:
“The ECMAScript committee has made a lot of progress in ECMAScript 2015. It adds things people want, like modules, classes, lambdas and destructuring. It’s a very ambitious and big rewrite of the language, but it takes a while for new revisions of ECMAScript to reach the ecosystem. People are still using old Android phones with old browsers, for example. What you need is the ability to transpile, to give you the illusion you’re using the new JavaScript, but then turns it into ECMAScript 2 or 3 so it runs everywhere.”  [2]
Segue então uma introdução, seguindo a documentação oficial, e fazendo algumas comparações com o C#:
Instalando o Typescript por linha de comando:
npm install -g typescript

Typescript oferece análise de código estática. Exemplo:
function greeter(person: string) {
return "Hello, " + person;
}
var user = [0, 1, 2];
document.body.innerHTML = greeter(user);
Ao tentar transpilar o código acima, você verá o erro abaixo, mas ainda assim o arquivo javascript será gerado (O objetivo é apenas lhe ajudar falando que seu código provavelmente não irá rodar como o esperado).
greeter.ts(7,35): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'

Interfaces

No typescript dois objetos são compatíveis se suas estruturas são compatíveis, então uma classe não precisar implementar a interface.

Classes

O TypeScript permite programação orientada a objeto,com uso de classes, heranças. Ao ser transpilado gera o código javascript baseado nas opções definidas para a compilação.

Benefícios do uso com o Visual Studio Code

Na versão 1.9 do Visual Studio Code há, na tela inicial, a opção de Interactive Playground, no qual é mostrada benefícios do editor, entre eles : Renomeação Refactorion, IntelliSense, Emmey

2017-02-04 18_39_43-Interactive Playground - Visual Studio Code


 

Segue um repositório no Git com alguns exemplos, comentários e comparativos entre o TypeScript e o Javascript gerado, seguindo o handbook.

Referências
[1] ES6 — classes and inheritance
[2] TypeScript is getting attention in the enterprise