O documento apresenta uma palestra sobre TypeScript. Resume-se em 3 frases: 1) TypeScript é um superconjunto de JavaScript que adiciona tipagem estática e outras funcionalidades, como classes e módulos, compilando para código JavaScript executável. 2) A palestra discute os principais recursos de tipagem e modularização do TypeScript, comparando-o com CoffeeScript, e demonstra como debugar código TypeScript diretamente na linguagem. 3) Também apresenta como usar TypeScript em diversos ambientes como Node.js, Visual Studio,

1. Apresentando:
Giovanni Bassi Victor Cavalcante
giovanni@lambda3.com.br vcavalcante@lambda3.com.br
@giovannibassi @vcavalcante

2. @VCavalcante
@GiovanniBassi

4. Uma empresa democrática
• Sem gerentes ou estrutura hierárquica
• Livros abertos
• Decisões por consenso
• 100% ágil
http://bit.ly/lambda3democracia

5. Agenda
Desafios do desenvolvimento
Algumas bizarrices do JavaScript O TypeScript
com JavaScript
Demos Desenvolvimento pra Windows
Comparação com CoffeeScript
(features, linux, windows, etc) 8 com TypeScript
Q&A

6. Desafios do
desenvolvimento com
JavaScript

7. Bizarrices do Javascript
Veja mais em: http://youtu.be/kXEgk1Hdze0

8. Desafios do JavaScript
• OO com prototypes
• Auto-complete limitado
• Modularização é difícil

9. Herança com prototypes
var Animal = function () { };
Animal.prototype.respira = function () {
return "Respirando.... Respirando....";
};
var Cachorro = function () { };
Cachorro.prototype = new Animal();
Cachorro.prototype.late = function () {
return 'Au Au!';
};
var cachorro = new Cachorro();
var animal = new Animal();
console.log(cachorro.respira());
console.log(cachorro.late());
console.log(animal.respira());

10. Nosso desafio do dia a dia

11. Modularização do JavaScript
• Diversos atributos adicionados ao escopo global (no
browser, window)
• Conflitos de nomes
• Sem modularização com suporte na linguagem, é
preciso programar a modularização na mão
• Difícil definir explicitamente as dependências de cada
módulo

12. O que é?
TypeScript

13. JavaScript é TypeScript!
TypeScript
JavaScript

14. TypeScript compila para JavaScript

15. TypeScript é escrito em TypeScript
• Código fonte aberto
• Compilador na linha de comando/terminal
• Módulo do NodeJS ou executável

16. TypeScript
A linguagem

17. Tipagem estática opcional
var soma = function(x, y){
return x + y;
}
soma(1,2) //3 //ok!
soma(1,"2") //"12" //não ok!

18. Tipagem estática opcional
var soma = function(x:number, y:number){
return x + y;
}
soma(1,2) //3 //ok!
soma(1,"2") //não compila

19. Sintaxe de função mais limpa
var mult = function(a,b){
return a*b;
}
//a mesma função:
var mult = (a,b) => a*b;

20. Tipagem nas funções
var somaLados = (poligono: { x: number; y: number; }) {
return poligono.x + poligono.y;
}
var total = somaLados( { x: 2, y: 3 });
somaLados( 3 ); //não compila

21. Inferência de tipo
var numero = 1; //isso é um número
function escreva(texto:string){}
escreva(numero); //não compila
//o mesmo que:
var numero:number = 1

22. Inferência de tipo
var numero = 1; //isso é um número
function escreva(texto:string){}
Com TypeScript os erros de
tipagem podem ser pegos
escreva(numero); //não compila
em tempo de compilação
//o mesmo que:
var numero:number = 1

23. Classes!
class Animal {
respira(): string {
return "Respirando.... Respirando....";
};
}
class Cachorro extends Animal {
latir(): string {
return "Au Au!!";
}
}
var cachorro = new Cachorro();
var animal = new Animal();
console.log(animal.respira());
console.log(cachorro.latir());

24. Construtores
class Animal {
constructor(public nome: string) { };
respira(): string {
return this.nome + " Respirando.... Respirando....";
};
}
class Cachorro extends Animal {
late(): string {
return this.nome + " Au Au!!";
}
}
var cachorro = new Cachorro("Link");
var animal = new Animal("Arroba");

25. Interface de função
interface binario {
(x: number, y: number): number;
}
var soma:binario = (x, y) => x + y;
soma(4, "5"); //não compila

26. Interfaces de objetos
interface Cachorro {
nome: string;
late: () => void;
}
var lessie: Cachorro = {
nome: "Lessie",
late: () => console.log("auau")
}
lessie.late();

27. Interfaces como parâmetros
interface Retangulo {
altura: number;
largura?: number;
}
var area = (r: Retangulo) => {
if (r.largura === undefined)
return r.altura * r.altura;
else
return r.largura * r.altura;
}
var areaquadrado = area({altura:10});
var arearetangulo = area({altura:10, largura:5});

28. Interfaces para classes
interface Calc {
soma(n: number): Calc;
total(): number;
}
interface Calc {
subtrai(n: number): Calc;
}
class MinhaCalc implements Calc {
private t = 0;
soma(n: number) { this.t += n; return this; }
total() { return this.t; };
subtrai(n: number) { this.t -= n; return this; }
}

29. Propriedades em classes
class Pessoa {
private _nome: string;
get nome(): string {
return this._nome;
}
set nome(value: string) {
this._nome = value;
}
}
var p = new Pessoa();
p.nome = "Giovanni";
console.log(p.nome);

30. Módulos
//arquivo notificações.ts
module Notificacao {
export interface Notificador {
notificar(msg:string): void;
}
export class Alert implements Notificador {
notificar(msg:string): void {
alert(msg);
}
}
export class Log implements Notificador {
notificar(msg:string): void {
console.log(msg);
}
}
}

31. Módulos
// arquivo ContasAPagar.ts
/// <reference path="Notificacoes.ts" />
module ContasAPagar {
class PagamentoAtrasados {
private notificador:Notificacao.Notificador =
new Notificacao.Log();
Avisar() {
this.notificador.notificar("ola");
}
}
}

32. Módulos devem carregar na ordem
correta
<script src="Notificacoes.js"></script>
<script src="ContasAPagar.js"></script>

33. Modulos AMD
import notificacao = module("Notificacoes");
module ContasAPagar {
class PagamentoAtrasados {
private notificador:
notificacao.Notificador = new notificacao.Log();
Avisar() {
this.notificador.notificar("ola");
}
}
}

34. TypeScript é escrito em TypeScript
Código fonte
Apache 2
Clone at:
https://git01.codeplex.com/typescript
Fork at:
http://typescript.codeplex.com/SourceControl/BrowseLatest

37. Node, Visual Studio, Vim, Sublime, Cloud9, Linux, Windows...
Como?

38. Playground
http://www.typescriptlang.org/Playground/
http://bit.ly/tsplayground

39. +
Sublime Text
http://www.sublimetext.com/’

40. + +
http://bit.ly/nodeversionmanager
npm install -g typescript
sudo apt-get install vim
Clone: https://github.com/giggio/vimfiles

41. + +
WebEssentials
http://bit.ly/DOWNLOADVS
http://vswebessentials.com

42. Source maps FTW!
Debugging

43. Possivel debugar direto no TypeScript
• Usando um de-para de TypeScript para JavaScript
• O padrão atual é baseado nos source maps propostos
pela Mozilla (http://bit.ly/sourcemapsr3)
• É possível colocar breakpoints, ver valor de
variáveis, step into, etc
• Já disponível no Google Chrome e Visual Studio

44. Debugging com source maps e Chrome

45. Debugging com source maps e Visual Studio

46. Desenvolvimento pra
Windows 8 com
TypeScript

47. Comparando com
CoffeeScript

48. TypeScript x CoffeeScript
TypeScript CoffeeScript
Tipagem estática opcional Tipagem dinâmica
Superset do JavaScript (antencipando Nova linguagem
novidades do EcmaScript 6)
Em geral, mais agradável para Em geral, mais agradável para
programadores Java, C#, C++ programadores Ruby, Python, Groovy
Mais fácil escrever ferramental pelas Mais difícil escrever ferramental pelas
características estáticas da linguagem características dinâmicas da linguagem
Auto-complete, refactoring, debugging, find
references, etc
Source mapping e debugging possibilitado Source mapping em versão futura, atrasado
direto na linguagem com relação ao planejamento
Leitura é igual ao JavaScript, com pequenas Mais fácil de ler (postfix, novas palavras-
melhorias chave, etc, autoreturn, menos cerimônia)

49. Roadmap
1.0??
0.9?
0.8.2
21/jan
0.8.1 Jake
5/dez --out
Source --watch
0.8.0 maps
1/out
Release
inicial

50. Mais informações
• http://www.typescriptlang.org/
• Cursos da Pluralsight: http://bit.ly/cursots
• Blog do TypeScript: http://blogs.msdn.com/b/typescript/
• Tag de TypeScript no blog da Lambda3: http://bit.ly/lambda3ts
• TouchDevelop (app Windows8): http://bit.ly/touchdevelopvideo
• Anders Hejlsberg apresentando: http://bit.ly/andersts
• Hanselman com Anders: http://bit.ly/hanselts
• Type Definitions para TypeScript: http://bit.ly/definitelytyped

51. Obrigado!
Giovanni Bassi Victor Cavalcante
giovanni@lambda3.com.br vcavalcante@lambda3.com.br
@giovannibassi @vcavalcante

52. @GiovanniBassi
@VCavalcante

53. www.lambda3.com.br