TypeScript - Campus party 2013

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

@VCavalcante

@GiovanniBassi

Uma empresa democrática
• Sem gerentes ou estrutura hierárquica
• Livros abertos
• Decisões por consenso
• 100% ágil

http://bit.ly/lambda3democracia

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

Desafios do
desenvolvimento com
JavaScript

Bizarrices do Javascript

Veja mais em: http://youtu.be/kXEgk1Hdze0

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

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());

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

JavaScript é TypeScript!
TypeScript

JavaScript

TypeScript compila para JavaScript

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

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

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

Sintaxe de função mais limpa
var mult = function(a,b){
return a*b;
}

//a mesma função:
var mult = (a,b) => a*b;

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

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

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

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());

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");

Interface de função
interface binario {
(x: number, y: number): number;
}

var soma:binario = (x, y) => x + y;

soma(4, "5"); //não compila

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

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});

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; }
}

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);

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);
}
}
}

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");
}
}
}

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

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

TypeScript é escrito em TypeScript

Código fonte
Apache 2

Clone at:
https://git01.codeplex.com/typescript
Fork at:
http://typescript.codeplex.com/SourceControl/BrowseLatest

Node, Visual Studio, Vim, Sublime, Cloud9, Linux, Windows...

Como?

Playground

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

+
Sublime Text

http://www.sublimetext.com/’

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

+ +
WebEssentials

http://bit.ly/DOWNLOADVS
http://vswebessentials.com

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

Debugging com source maps e Chrome

Debugging com source maps e Visual Studio

Desenvolvimento pra
Windows 8 com
TypeScript

Comparando com
CoffeeScript

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)

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

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

Obrigado!

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

TypeScript - Campus party 2013

Mais conteúdo relacionado

Mais procurados

Semelhante a TypeScript - Campus party 2013

Mais de Giovanni Bassi

TypeScript - Campus party 2013

Notas do Editor