Apresentando:                Giovanni Bassi               Victor Cavalcante     giovanni@lambda3.com.br     vcavalcante@la...
@VCavalcante          @GiovanniBassi
Uma empresa democrática•   Sem gerentes ou estrutura hierárquica•   Livros abertos•   Decisões por consenso•   100% ágil  ...
Agenda                                      Desafios do desenvolvimento   Algumas bizarrices do JavaScript                ...
Desafios dodesenvolvimento com           JavaScript
Bizarrices do JavascriptVeja mais em: http://youtu.be/kXEgk1Hdze0
Desafios do JavaScript• OO com prototypes• Auto-complete limitado• Modularização é difícil
Herança com prototypesvar Animal = function () { };Animal.prototype.respira = function () {    return "Respirando.... Resp...
Nosso desafio do dia a dia
Modularização do JavaScript• Diversos atributos adicionados ao escopo global (no  browser, window)• Conflitos de nomes• Se...
O que é?TypeScript
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 exec...
TypeScriptA linguagem
Tipagem estática opcionalvar soma = function(x, y){  return x + y;}soma(1,2) //3 //ok!soma(1,"2") //"12" //não ok!
Tipagem estática opcionalvar soma = function(x:number, y:number){  return x + y;}soma(1,2) //3 //ok!soma(1,"2") //não comp...
Sintaxe de função mais limpavar mult = function(a,b){  return a*b;}//a mesma função:var mult = (a,b) => a*b;
Tipagem nas funçõesvar somaLados = (poligono: { x: number; y: number; }) {  return poligono.x + poligono.y;}var total = so...
Inferência de tipovar numero = 1; //isso é um númerofunction escreva(texto:string){}escreva(numero); //não compila//o mesm...
Inferência de tipovar numero = 1; //isso é um númerofunction escreva(texto:string){}            Com TypeScript os erros de...
Classes!class Animal {    respira(): string {        return "Respirando.... Respirando....";    };}class Cachorro extends ...
Construtoresclass Animal {    constructor(public nome: string) { };    respira(): string {        return this.nome + " Res...
Interface de funçãointerface binario {  (x: number, y: number): number;}var soma:binario = (x, y) => x + y;soma(4, "5"); /...
Interfaces de objetosinterface Cachorro {  nome: string;  late: () => void;}var lessie: Cachorro = {  nome: "Lessie",  lat...
Interfaces como parâmetrosinterface Retangulo {  altura: number;  largura?: number;}var area = (r: Retangulo) => {  if (r....
Interfaces para classesinterface Calc {    soma(n: number): Calc;    total(): number;}interface Calc {    subtrai(n: numbe...
Propriedades em classesclass Pessoa {    private _nome: string;    get nome(): string {        return this._nome;    }    ...
Módulos//arquivo notificações.tsmodule Notificacao {    export interface Notificador {        notificar(msg:string): void;...
Módulos// arquivo ContasAPagar.ts/// <reference path="Notificacoes.ts" />module ContasAPagar {    class PagamentoAtrasados...
Módulos devem carregar na ordemcorreta<script src="Notificacoes.js"></script><script src="ContasAPagar.js"></script>
Modulos AMDimport notificacao = module("Notificacoes");module ContasAPagar {    class PagamentoAtrasados {        private ...
TypeScript é escrito em TypeScript                                Código fonte                                            ...
Node, Visual Studio, Vim, Sublime, Cloud9, Linux, Windows...                                         Como?
Playgroundhttp://www.typescriptlang.org/Playground/http://bit.ly/tsplayground
+       Sublime Texthttp://www.sublimetext.com/’
+        +http://bit.ly/nodeversionmanagernpm install -g typescriptsudo apt-get install vimClone: https://github.com/giggi...
+           +                             WebEssentialshttp://bit.ly/DOWNLOADVShttp://vswebessentials.com
Source maps FTW!Debugging
Possivel debugar direto no TypeScript• Usando um de-para de TypeScript para JavaScript• O padrão atual é baseado nos sourc...
Debugging com source maps e Chrome
Debugging com source maps e Visual Studio
Desenvolvimento pra    Windows 8 com          TypeScript
Comparando com   CoffeeScript
TypeScript x CoffeeScriptTypeScript                                    CoffeeScriptTipagem estática opcional              ...
Roadmap                                        1.0??                                 0.9?                       0.8.2     ...
Mais informações•   http://www.typescriptlang.org/•   Cursos da Pluralsight: http://bit.ly/cursots•   Blog do TypeScript: ...
Obrigado!           Giovanni Bassi               Victor Cavalcantegiovanni@lambda3.com.br     vcavalcante@lambda3.com.br  ...
@GiovanniBassi@VCavalcante
www.lambda3.com.br
TypeScript - Campus party 2013
TypeScript - Campus party 2013
TypeScript - Campus party 2013
Próximos SlideShares
Carregando em…5
×

TypeScript - Campus party 2013

1.885 visualizações

Publicada em

Palestra ministrada na Campus Party Brasil 2013.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

TypeScript - Campus party 2013

  1. 1. Apresentando: Giovanni Bassi Victor Cavalcante giovanni@lambda3.com.br vcavalcante@lambda3.com.br @giovannibassi @vcavalcante
  2. 2. @VCavalcante @GiovanniBassi
  3. 3. Uma empresa democrática• Sem gerentes ou estrutura hierárquica• Livros abertos• Decisões por consenso• 100% ágil http://bit.ly/lambda3democracia
  4. 4. 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
  5. 5. Desafios dodesenvolvimento com JavaScript
  6. 6. Bizarrices do JavascriptVeja mais em: http://youtu.be/kXEgk1Hdze0
  7. 7. Desafios do JavaScript• OO com prototypes• Auto-complete limitado• Modularização é difícil
  8. 8. Herança com prototypesvar 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());
  9. 9. Nosso desafio do dia a dia
  10. 10. 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
  11. 11. O que é?TypeScript
  12. 12. JavaScript é TypeScript! TypeScript JavaScript
  13. 13. TypeScript compila para JavaScript
  14. 14. TypeScript é escrito em TypeScript• Código fonte aberto• Compilador na linha de comando/terminal• Módulo do NodeJS ou executável
  15. 15. TypeScriptA linguagem
  16. 16. Tipagem estática opcionalvar soma = function(x, y){ return x + y;}soma(1,2) //3 //ok!soma(1,"2") //"12" //não ok!
  17. 17. Tipagem estática opcionalvar soma = function(x:number, y:number){ return x + y;}soma(1,2) //3 //ok!soma(1,"2") //não compila
  18. 18. Sintaxe de função mais limpavar mult = function(a,b){ return a*b;}//a mesma função:var mult = (a,b) => a*b;
  19. 19. Tipagem nas funçõesvar somaLados = (poligono: { x: number; y: number; }) { return poligono.x + poligono.y;}var total = somaLados( { x: 2, y: 3 });somaLados( 3 ); //não compila
  20. 20. Inferência de tipovar numero = 1; //isso é um númerofunction escreva(texto:string){}escreva(numero); //não compila//o mesmo que:var numero:number = 1
  21. 21. Inferência de tipovar numero = 1; //isso é um númerofunction escreva(texto:string){} Com TypeScript os erros de tipagem podem ser pegosescreva(numero); //não compila em tempo de compilação//o mesmo que:var numero:number = 1
  22. 22. 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());
  23. 23. Construtoresclass 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");
  24. 24. Interface de funçãointerface binario { (x: number, y: number): number;}var soma:binario = (x, y) => x + y;soma(4, "5"); //não compila
  25. 25. Interfaces de objetosinterface Cachorro { nome: string; late: () => void;}var lessie: Cachorro = { nome: "Lessie", late: () => console.log("auau")}lessie.late();
  26. 26. Interfaces como parâmetrosinterface 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});
  27. 27. Interfaces para classesinterface 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; }}
  28. 28. Propriedades em classesclass 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);
  29. 29. Módulos//arquivo notificações.tsmodule 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); } }}
  30. 30. 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"); } }}
  31. 31. Módulos devem carregar na ordemcorreta<script src="Notificacoes.js"></script><script src="ContasAPagar.js"></script>
  32. 32. Modulos AMDimport notificacao = module("Notificacoes");module ContasAPagar { class PagamentoAtrasados { private notificador:notificacao.Notificador = new notificacao.Log(); Avisar() { this.notificador.notificar("ola"); } }}
  33. 33. TypeScript é escrito em TypeScript Código fonte Apache 2Clone at:https://git01.codeplex.com/typescriptFork at:http://typescript.codeplex.com/SourceControl/BrowseLatest
  34. 34. Node, Visual Studio, Vim, Sublime, Cloud9, Linux, Windows... Como?
  35. 35. Playgroundhttp://www.typescriptlang.org/Playground/http://bit.ly/tsplayground
  36. 36. + Sublime Texthttp://www.sublimetext.com/’
  37. 37. + +http://bit.ly/nodeversionmanagernpm install -g typescriptsudo apt-get install vimClone: https://github.com/giggio/vimfiles
  38. 38. + + WebEssentialshttp://bit.ly/DOWNLOADVShttp://vswebessentials.com
  39. 39. Source maps FTW!Debugging
  40. 40. 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
  41. 41. Debugging com source maps e Chrome
  42. 42. Debugging com source maps e Visual Studio
  43. 43. Desenvolvimento pra Windows 8 com TypeScript
  44. 44. Comparando com CoffeeScript
  45. 45. TypeScript x CoffeeScriptTypeScript CoffeeScriptTipagem estática opcional Tipagem dinâmicaSuperset do JavaScript (antencipando Nova linguagemnovidades do EcmaScript 6)Em geral, mais agradável para Em geral, mais agradável paraprogramadores Java, C#, C++ programadores Ruby, Python, GroovyMais fácil escrever ferramental pelas Mais difícil escrever ferramental pelascaracterísticas estáticas da linguagem características dinâmicas da linguagemAuto-complete, refactoring, debugging, findreferences, etcSource mapping e debugging possibilitado Source mapping em versão futura, atrasadodireto na linguagem com relação ao planejamentoLeitura é igual ao JavaScript, com pequenas Mais fácil de ler (postfix, novas palavras-melhorias chave, etc, autoreturn, menos cerimônia)
  46. 46. 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
  47. 47. 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
  48. 48. Obrigado! Giovanni Bassi Victor Cavalcantegiovanni@lambda3.com.br vcavalcante@lambda3.com.br @giovannibassi @vcavalcante
  49. 49. @GiovanniBassi@VCavalcante
  50. 50. www.lambda3.com.br

×