SlideShare uma empresa Scribd logo
1 de 53
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());
Nosso desafio do dia a dia
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
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 executável
TypeScript

A linguagem
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
Source maps FTW!

Debugging
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
@GiovanniBassi
@VCavalcante
www.lambda3.com.br

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Javascript por debaixo dos panos
Javascript por debaixo dos panosJavascript por debaixo dos panos
Javascript por debaixo dos panos
 
Programando em Go
Programando em GoProgramando em Go
Programando em Go
 
Composer dependency manager
Composer   dependency managerComposer   dependency manager
Composer dependency manager
 
Testes unitários como ferramentas de design de código
Testes unitários como ferramentas de design de códigoTestes unitários como ferramentas de design de código
Testes unitários como ferramentas de design de código
 
Composer dependency manager - TDC - POA 2017
Composer   dependency manager - TDC - POA 2017Composer   dependency manager - TDC - POA 2017
Composer dependency manager - TDC - POA 2017
 
Vagrant - ambiente de desenvolvimento virtualizado
Vagrant - ambiente de desenvolvimento virtualizadoVagrant - ambiente de desenvolvimento virtualizado
Vagrant - ambiente de desenvolvimento virtualizado
 
Django - A sua cápsula de soluções web em python
Django - A sua cápsula de soluções web em pythonDjango - A sua cápsula de soluções web em python
Django - A sua cápsula de soluções web em python
 
Deixando de ser moleque com PHP
Deixando de ser moleque com PHPDeixando de ser moleque com PHP
Deixando de ser moleque com PHP
 
Unit Test JavaScript
Unit Test JavaScriptUnit Test JavaScript
Unit Test JavaScript
 
Contribuindo e criando software livre
Contribuindo e criando software livreContribuindo e criando software livre
Contribuindo e criando software livre
 
Vagrant você deveria está usando
Vagrant   você deveria está usandoVagrant   você deveria está usando
Vagrant você deveria está usando
 
Testes unitários como ferramentas de design de código
Testes unitários como ferramentas de design de códigoTestes unitários como ferramentas de design de código
Testes unitários como ferramentas de design de código
 
Curso javascript básico
Curso javascript básicoCurso javascript básico
Curso javascript básico
 
Integração contínua - Você não tem dsculpa para não usar
Integração contínua - Você não tem dsculpa para não usarIntegração contínua - Você não tem dsculpa para não usar
Integração contínua - Você não tem dsculpa para não usar
 
C# 6.0 - Interopmix 2015
C# 6.0 - Interopmix 2015C# 6.0 - Interopmix 2015
C# 6.0 - Interopmix 2015
 
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
Desenvolvimento Mobile Multiplataforma: Uma abordagem ágil e de alto desempen...
 
Palestra TDD - TDC - 2016
Palestra TDD - TDC - 2016Palestra TDD - TDC - 2016
Palestra TDD - TDC - 2016
 
Python 3k
Python 3kPython 3k
Python 3k
 
Python para Programadores
Python para ProgramadoresPython para Programadores
Python para Programadores
 
Tdd em django sem desculpas versao final
Tdd em django sem desculpas versao finalTdd em django sem desculpas versao final
Tdd em django sem desculpas versao final
 

Semelhante a TypeScript - Campus party 2013

Programação em Shell Script
Programação em Shell ScriptProgramação em Shell Script
Programação em Shell Script
Reinaldo Lima
 
Evolução do .NET Framework e do Visual Basic
Evolução do .NET Framework e do Visual BasicEvolução do .NET Framework e do Visual Basic
Evolução do .NET Framework e do Visual Basic
Ricardo Guerra Freitas
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
Carlos Santos
 
Java introdução ao java
Java   introdução ao javaJava   introdução ao java
Java introdução ao java
Armando Daniel
 

Semelhante a TypeScript - Campus party 2013 (20)

JavaScript: agora é sério
JavaScript: agora é sérioJavaScript: agora é sério
JavaScript: agora é sério
 
Javascript
JavascriptJavascript
Javascript
 
Criando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & DockerCriando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & Docker
 
Programação em Shell Script
Programação em Shell ScriptProgramação em Shell Script
Programação em Shell Script
 
Introdução a linguagem Python
Introdução a linguagem PythonIntrodução a linguagem Python
Introdução a linguagem Python
 
Esta começando a programar para a web? Então começe com Rails
Esta começando a programar para a web? Então começe com RailsEsta começando a programar para a web? Então começe com Rails
Esta começando a programar para a web? Então começe com Rails
 
Palestra Ruby
Palestra RubyPalestra Ruby
Palestra Ruby
 
C sharp lesson1
C sharp lesson1C sharp lesson1
C sharp lesson1
 
Csharp
CsharpCsharp
Csharp
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
Evolução do .NET Framework e do Visual Basic
Evolução do .NET Framework e do Visual BasicEvolução do .NET Framework e do Visual Basic
Evolução do .NET Framework e do Visual Basic
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
 
Vivendo de hacking
Vivendo de hackingVivendo de hacking
Vivendo de hacking
 
Aplicações com Tecnologias Web
Aplicações com Tecnologias WebAplicações com Tecnologias Web
Aplicações com Tecnologias Web
 
Aula1
Aula1Aula1
Aula1
 
Python No Terra (2006-12-21)
Python No Terra  (2006-12-21)Python No Terra  (2006-12-21)
Python No Terra (2006-12-21)
 
Linguagem c
Linguagem cLinguagem c
Linguagem c
 
Java introdução ao java
Java   introdução ao javaJava   introdução ao java
Java introdução ao java
 
Minicurso Java
Minicurso JavaMinicurso Java
Minicurso Java
 
Desenvolvimento Agil Com Doctrine Orm
Desenvolvimento Agil Com Doctrine OrmDesenvolvimento Agil Com Doctrine Orm
Desenvolvimento Agil Com Doctrine Orm
 

Mais de Giovanni Bassi

Mais de Giovanni Bassi (20)

O que aprendi montando a arquitetura de microsserviços
O que aprendi montando a arquitetura de microsserviçosO que aprendi montando a arquitetura de microsserviços
O que aprendi montando a arquitetura de microsserviços
 
Sendo ágil com git
Sendo ágil com gitSendo ágil com git
Sendo ágil com git
 
Analisando dumps de memória de aplicações .NET
Analisando dumps de memória de aplicações .NETAnalisando dumps de memória de aplicações .NET
Analisando dumps de memória de aplicações .NET
 
Novidades do c# 7 e 8
Novidades do c# 7 e 8Novidades do c# 7 e 8
Novidades do c# 7 e 8
 
Async e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agoraAsync e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agora
 
Conhecendo o AKS, o azure container services com kubernetes
Conhecendo o AKS, o azure container services com kubernetesConhecendo o AKS, o azure container services com kubernetes
Conhecendo o AKS, o azure container services com kubernetes
 
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
 
C#7, 7.1, 7.2, 7.3 e C# 8
C#7, 7.1, 7.2, 7.3 e C# 8C#7, 7.1, 7.2, 7.3 e C# 8
C#7, 7.1, 7.2, 7.3 e C# 8
 
Engenharia ágil de ponta a ponta do clone ao deploy
Engenharia ágil de ponta a ponta do clone ao deployEngenharia ágil de ponta a ponta do clone ao deploy
Engenharia ágil de ponta a ponta do clone ao deploy
 
Entrega contínua fica mais fácil com contêineres
Entrega contínua fica mais fácil com contêineresEntrega contínua fica mais fácil com contêineres
Entrega contínua fica mais fácil com contêineres
 
.NET Core, ASP.NET Core e .NET Standard 2
.NET Core, ASP.NET Core e .NET Standard 2.NET Core, ASP.NET Core e .NET Standard 2
.NET Core, ASP.NET Core e .NET Standard 2
 
.NET com contêineres Windows e Linux
.NET com contêineres Windows e Linux.NET com contêineres Windows e Linux
.NET com contêineres Windows e Linux
 
Async e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agoraAsync e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agora
 
Compartilhando código entre frontend e backend com Node.js
Compartilhando código entre frontend e backend com Node.jsCompartilhando código entre frontend e backend com Node.js
Compartilhando código entre frontend e backend com Node.js
 
Construindo uma ferramenta CLI multiplataforma com Node.js
Construindo uma ferramenta CLI multiplataforma com Node.jsConstruindo uma ferramenta CLI multiplataforma com Node.js
Construindo uma ferramenta CLI multiplataforma com Node.js
 
O Futuro do C#: C#8
O Futuro do C#: C#8O Futuro do C#: C#8
O Futuro do C#: C#8
 
Um mergulho nos containers windows
Um mergulho nos containers windowsUm mergulho nos containers windows
Um mergulho nos containers windows
 
Por dentro do .NET Core
Por dentro do .NET CorePor dentro do .NET Core
Por dentro do .NET Core
 
Build e release pipeline com docker
Build e release pipeline com dockerBuild e release pipeline com docker
Build e release pipeline com docker
 
Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...
Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...
Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (6)

Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfConcurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 

TypeScript - Campus party 2013

  • 1. Apresentando: Giovanni Bassi Victor Cavalcante giovanni@lambda3.com.br vcavalcante@lambda3.com.br @giovannibassi @vcavalcante
  • 2. @VCavalcante @GiovanniBassi
  • 3.
  • 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
  • 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
  • 13. JavaScript é TypeScript! TypeScript JavaScript
  • 15. TypeScript é escrito em TypeScript • Código fonte aberto • Compilador na linha de comando/terminal • Módulo do NodeJS ou executável
  • 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
  • 35.
  • 36.
  • 37. Node, Visual Studio, Vim, Sublime, Cloud9, Linux, Windows... Como?
  • 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
  • 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

Notas do Editor

  1. Roteiro:Mostrar as bizarrices do JavaScript Demonstrar as coisas ruins do JavaScript parecido com o vídeo: http://www.youtube.com/watch?v=kXEgk1Hdze0Desafios do desenvolvimento com JavaScript OO com prototypesAuto-complete limitado Modularização é difícilApresentar o TypeScript A linguagem Classes Módulos Interfaces Classes e Interface abertas Tipagem opcionalApresentar o fato de ser Open Source (código no codeplex) http://typescript.codeplex.com/Roda em NodeJSTypeScript é escrito em TypeScriptDemos: Continuar mostrando features da linguagem Demo no site com o Playgroundhttp://www.typescriptlang.org/Playground/Demo mostrando com NodeJS no Linux Instalando Baixando com GitRodando a partir do código fonte Desenvolvendo no VimDemo mostrando TypeScript no Visual Studio RefactoringApoio do ferramental Exibição lado a lado com JS geradoDesenvolvimento pra Windows 8 com TypeScript Comparação com CoffeeScriptDescrição: JavaScript é a linguagem da web, e disso não há dúvida. Mas a linguagem tem evoluído com timidez, e quem trabalha no dia a dia com ela sente necessidade de uma linguagem que suporte melhor o desenvolvimento. Coisas simples, como uma ferramenta que suporte uma boa refatoração, modularização, e suporte a orientação a objetos com classes fazem muita falta. Além disso, algumas construções do JavaScript poderiam ser mais fáceis de entender. O TypeScript é uma linguagem baseada em JavaScript (na verdade, um superconjunto seu), que compila para JavaScript, e que pode ser usada em qualquer plataforma (servidor e cliente) e com qualquer navegador. Fácil de usar, extremamente familiar aos desenvolvedores de JavaScript, de instalação rápida e simples no Linux, Mac ou Windows, e com um excelente ferramental a disposição, a linguagem chega para pavimentar o caminho até a próxima versão do JavaScript e para brilhar por conta própria. Nessa palestra veremos como usar e instalar, quais as vantagens e oportunidades e os melhores cenários para seu uso.
  2. Victor Cavalcante[]+[]// ’’[]+{}// ‘[object Object]’{}+[]// 0{}+{}// NaN“\\f\\n\\r” == 0
  3. Você pode copiar JavaScript e colocar em um arquivo .TS.
  4. Você pode copiar JavaScript e colocar em um arquivo .TS.
  5. Com JavaScript, só em tempo de execução, não há opção.
  6. Giovanni Bassi
  7. Victor Cavalcante
  8. Giovanni Bassi
  9. Victor Cavalcante
  10. Victor Cavalcante
  11. Giovanni Bassi