Diga olá ao TypeScript e adeus ao JavaScript

Acredito que este artigo tenha chamado a sua atenção pelo título. Como assim??? adeus ao JavaScript??? A linguagem que está bombando em 2015 (e claro, 2016!). Posso estar sendo um pouco ousado aqui, mas eu tenho em mente que, neste momento, o JavaScript para mim é agora “linguagem de máquina” ou o famoso bytecode. Porquê? Bom, você conhece um código javascript minificado+comprimido+”esculachado”… Não estou retirando aqui toda a beleza do JavaScript, e consequente importância, mas na evolução que vem acontecendo a cada dia no mundo web, felizmente chegamos ao ponto que podemos tratar o javascript como uma linguagem tipada e semelhante ao c/java/php e derivados.

Neste ponto entra uma questão pessoal. Ou você vai adorar TypeScript ou vai achar completamente inútil, já que a sua principal característica é trazer uma “tipagem” a linguagem, e no pacote uma forma de programar em javascript mais parecida com Java e suas vertentes. Se você gosta de tipar suas váriaveis e métodos, criar classes, interfaces, usar Orientação a Objetos, o TypeScript foi feito para você e, claro, pode dizer adeus ao JavaScript.

Lembre-se que TypeScript está sendo usada extensivamente no novo framework Angular2, então se vc ainda não sabe o que é TypeScript, chegou o momento de conhecer.

O que é TypeScript?

O TypeScript possibilita que você escreva código JavaScript na forma que foi acostumado quando aprendeu Orientação a Objetos. Você lembra dessas aulas, em criar métodos que retornassem um valor com tipo definido, em criar classes e mais classes para o seu programa, em criar interfaces para desacoplar tudo que quisesse, entre diversas outras técnicas. Com TypeScript tudo isso é possível, porque no final ele pega o seu lindo código cheio de classes e transforma em JavaScript puro, no qual o browser vai compreender. No próprio site é definido que o TypeScript compila para JavaScript, o que é um termo tecnicamente errado – mas cada vez mais aceito, dado que aquele código “malucão” em JavaScript pode ser encarado como código de máquina.

No exemplo a seguir, criamos uma interface e uma classe, veja:

interface IComponent{
    getId() : string;
}

class Button implements IComponent{
    id:string;
    getId():string{
        return this.id;
    }
}

Este é um código 100% TypeScript que você pode criar em um editor de textos ou ide, no qual criamos uma interface chamada IComponente uma classe que chamamos de Button. Esta classe implementa a interface e por isso o método getId() deve ser criado. Se você salvar este arquivo como um arquivo javascript e adicionar em um documento HTML, nenhum browser vai entender isso, quem sabe num futuro distante. Mas isso nao é um problema, pois o TypeScript possui um “compilador” que irá pegar o seu código e transformar em algo do tipo:

var Button = (function () {
    function Button() {
    }
    Button.prototype.getId = function () {
        return this.id;
    };
    return Button;
})();

Este código feioso aí em cima é 100% javascript compreensível em qualquer navegador web. Tem gente que prefere escrever assim, vai entender né. Mas como essa mágica funciona? Vamos explicar a seguir.

Testando o TypeScript

Abra uma nova aba no seu browser e acesse: http://www.typescriptlang.org/Playground. O Playground é um pequeno editor TypeScript que, além de checar possíveis erros de sintaxe, também compila automaticamente o código para Javascript, no qual você pode testá-lo. Não omita o Playground no seu aprendizado, ele pode te ajudar muito, como na figura a seguir.

Caso não queira utilizar o Playground, pode-se instalar o TypeScript no seu ambiente de desenvolvimento através do node. O comando a seguir deve ser compreensível para você:

$ npm install typescript -g

Após instalar o TypeScript no ambiente, você pode usar o comando tsc para compilar um arquivo que geralmente está na extensão ts para js. Por exemplo, crie o arquivo script.ts com o código TypeScript descrito anteriormente e execute o seguinte comando:

tsc --out script.js script.ts

Editores de texto como o Sublime Text, Atom, VS Code, também tem a capacidade de compilar o arquivo em JavaScript, bastando apenas adicionar plugins relativos ao TypeScript. O VS Code, em particular, apresentou um bom comportamento frente aos outros, como pode-se perceber na imagem a seguir.

Visual Studio Code

Sublime Text 2.0.2

Mas neste artigo vamos nos contentar com o TypeScript Playground, e deixe os editores para a sua escolha pessoal (fique a vontade em perguntar como configurar o TypeScript no Sublime, é um pouco mais trabalhoso).

Agora que apresentamos o TypeScript e suas maravilhas, vamos compreender um pouco mais desta linguagem.

Tipos de variáveis

Uma das funcionalidades do TypeScript é criar variáveis com tipos definidos, assim como é feito no Java.

Tipos primitivos

Existem 3 tipos primitivos que podemos associar a uma variável. As variáveis são criadas através da palavra reservada var, e o tipo é informado da seguinte forma:

var NOMDE_DA_VARIAVEL : TIPO = VALOR

• boolean: Pode assumir os valores true ou false
• number: Assume qualquer número, como inteiro ou ponto flutuante.

• string: Tipo texto, pode ser atribuído com aspas simples ou duplas.

  Arrays

Arrays no TS podem ser criados através de duas formas. A primeira delas, usa-se [] na definição do tipo da variável, veja:

var list:number[] = [1, 2, 3];

A segunda é mais conhecida como “generics” e usa <> para definir o tipo, veja:

var list:Array<number> = [1,2,3];

Pode-se usar tipos complexos na criação de arrays, como no exemplo a seguir.

class Pessoa{
    nome:string;
    constructor(nome:string){
        this.nome = nome;
    }
    sayHello():string{
        return "Hello, " + this.nome;
    }
}

var fulano = new Pessoa("fulano");
var beltrano = new Pessoa("beltrano");

var pessoas:Pessoa[]= new Array();
pessoas.push(fulano);
pessoas.push(beltrano);

pessoas.forEach( (p:Pessoa)=>
    console.log(p.sayHello())
    );

Neste exemplo, criamos uma classe chamada Pessoa, adicionando a propriedade nome, o método construtor e o método sayHello. Depois, criamos duas variáveis fulano e beltrano, e adicionamos à variável pessoas, que é um array de vaiáveis do tipo Pessoa.

Após usar o método push para adicionar as variáveis no array, usamos o método forEach para percorrer cada item deste array e exibir uma mensagem no console do navegador.

Enum

Enums são velhos conhecidos do C#, e usados como “datatype”, que podem definir um status por exemplo.

enum Color {Red, Green, Blue};
var c: Color = Color.Green;

ou

enum Color {Red = 1, Green = 2, Blue = 3};
var c: Color = Color.Green;

Quando criamos um enum, usamos o “poder” da ide para que possamos programar de forma mais fácil, conforme a figura a seguir.

Any

Uma variável do tipo Any pode assumir qualquer valor.

var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

var list:any[] = [1, true, "free"];
list[1] = 100;

Void

O void é usado para determinar que um método não retorna nenhum valor, conforme o exemplo a seguir.

function warnUser(): void {
    alert("This is my warning message");
}

Classes

O conceito de classes no TypeScript é o mesmo de uma classe em qualquer linguagem orientada a objetos. As classes no TypeScript seguem o padrão ECMAScript 6 que em teoria será o “futuro” do JavaScript. A classe possui uma sintaxe muito familiar com c#, veja:

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
var greeter = new Greeter("world");

O construtor é definido pela palavra constructor. Métodos não necessitam da palavra function, bastando apenas usar ``Acredito que este artigo tenha chamado a sua atenção pelo título. Como assim??? adeus ao JavaScript??? A linguagem que está bombando em 2015 (e claro, 2016!). Posso estar sendo um pouco ousado aqui, mas eu tenho em mente que, neste momento, o JavaScript para mim é agora “linguagem de máquina” ou o famoso bytecode. Porquê? Bom, você conhece um código javascript minificado+comprimido+”esculachado”… Não estou retirando aqui toda a beleza do JavaScript, e consequente importância, mas na evolução que vem acontecendo a cada dia no mundo web, felizmente chegamos ao ponto que podemos tratar o javascript como uma linguagem tipada e semelhante ao c/java/php e derivados.

Neste ponto entra uma questão pessoal. Ou você vai adorar TypeScript ou vai achar completamente inútil, já que a sua principal característica é trazer uma “tipagem” a linguagem, e no pacote uma forma de programar em javascript mais parecida com Java e suas vertentes. Se você gosta de tipar suas váriaveis e métodos, criar classes, interfaces, usar Orientação a Objetos, o TypeScript foi feito para você e, claro, pode dizer adeus ao JavaScript.

Lembre-se que TypeScript está sendo usada extensivamente no novo framework Angular2, então se vc ainda não sabe o que é TypeScript, chegou o momento de conhecer.

O que é TypeScript?

O TypeScript possibilita que você escreva código JavaScript na forma que foi acostumado quando aprendeu Orientação a Objetos. Você lembra dessas aulas, em criar métodos que retornassem um valor com tipo definido, em criar classes e mais classes para o seu programa, em criar interfaces para desacoplar tudo que quisesse, entre diversas outras técnicas. Com TypeScript tudo isso é possível, porque no final ele pega o seu lindo código cheio de classes e transforma em JavaScript puro, no qual o browser vai compreender. No próprio site é definido que o TypeScript compila para JavaScript, o que é um termo tecnicamente errado – mas cada vez mais aceito, dado que aquele código “malucão” em JavaScript pode ser encarado como código de máquina.

No exemplo a seguir, criamos uma interface e uma classe, veja:

interface IComponent{
    getId() : string;
}

class Button implements IComponent{
    id:string;
    getId():string{
        return this.id;
    }
}

Este é um código 100% TypeScript que você pode criar em um editor de textos ou ide, no qual criamos uma interface chamada IComponente uma classe que chamamos de Button. Esta classe implementa a interface e por isso o método getId() deve ser criado. Se você salvar este arquivo como um arquivo javascript e adicionar em um documento HTML, nenhum browser vai entender isso, quem sabe num futuro distante. Mas isso nao é um problema, pois o TypeScript possui um “compilador” que irá pegar o seu código e transformar em algo do tipo:

var Button = (function () {
    function Button() {
    }
    Button.prototype.getId = function () {
        return this.id;
    };
    return Button;
})();

Este código feioso aí em cima é 100% javascript compreensível em qualquer navegador web. Tem gente que prefere escrever assim, vai entender né. Mas como essa mágica funciona? Vamos explicar a seguir.

Testando o TypeScript

Abra uma nova aba no seu browser e acesse: http://www.typescriptlang.org/Playground. O Playground é um pequeno editor TypeScript que, além de checar possíveis erros de sintaxe, também compila automaticamente o código para Javascript, no qual você pode testá-lo. Não omita o Playground no seu aprendizado, ele pode te ajudar muito, como na figura a seguir.

Caso não queira utilizar o Playground, pode-se instalar o TypeScript no seu ambiente de desenvolvimento através do node. O comando a seguir deve ser compreensível para você:

$ npm install typescript -g

Após instalar o TypeScript no ambiente, você pode usar o comando tsc para compilar um arquivo que geralmente está na extensão ts para js. Por exemplo, crie o arquivo script.ts com o código TypeScript descrito anteriormente e execute o seguinte comando:

tsc --out script.js script.ts

Editores de texto como o Sublime Text, Atom, VS Code, também tem a capacidade de compilar o arquivo em JavaScript, bastando apenas adicionar plugins relativos ao TypeScript. O VS Code, em particular, apresentou um bom comportamento frente aos outros, como pode-se perceber na imagem a seguir.

Visual Studio Code

Sublime Text 2.0.2

Mas neste artigo vamos nos contentar com o TypeScript Playground, e deixe os editores para a sua escolha pessoal (fique a vontade em perguntar como configurar o TypeScript no Sublime, é um pouco mais trabalhoso).

Agora que apresentamos o TypeScript e suas maravilhas, vamos compreender um pouco mais desta linguagem.

Tipos de variáveis

Uma das funcionalidades do TypeScript é criar variáveis com tipos definidos, assim como é feito no Java.

Tipos primitivos

Existem 3 tipos primitivos que podemos associar a uma variável. As variáveis são criadas através da palavra reservada var, e o tipo é informado da seguinte forma:

var NOMDE_DA_VARIAVEL : TIPO = VALOR

• boolean: Pode assumir os valores true ou false
• number: Assume qualquer número, como inteiro ou ponto flutuante.

• string: Tipo texto, pode ser atribuído com aspas simples ou duplas.

  Arrays

Arrays no TS podem ser criados através de duas formas. A primeira delas, usa-se [] na definição do tipo da variável, veja:

var list:number[] = [1, 2, 3];

A segunda é mais conhecida como “generics” e usa <> para definir o tipo, veja:

var list:Array<number> = [1,2,3];

Pode-se usar tipos complexos na criação de arrays, como no exemplo a seguir.

class Pessoa{
    nome:string;
    constructor(nome:string){
        this.nome = nome;
    }
    sayHello():string{
        return "Hello, " + this.nome;
    }
}

var fulano = new Pessoa("fulano");
var beltrano = new Pessoa("beltrano");

var pessoas:Pessoa[]= new Array();
pessoas.push(fulano);
pessoas.push(beltrano);

pessoas.forEach( (p:Pessoa)=>
    console.log(p.sayHello())
    );

Neste exemplo, criamos uma classe chamada Pessoa, adicionando a propriedade nome, o método construtor e o método sayHello. Depois, criamos duas variáveis fulano e beltrano, e adicionamos à variável pessoas, que é um array de vaiáveis do tipo Pessoa.

Após usar o método push para adicionar as variáveis no array, usamos o método forEach para percorrer cada item deste array e exibir uma mensagem no console do navegador.

Enum

Enums são velhos conhecidos do C#, e usados como “datatype”, que podem definir um status por exemplo.

enum Color {Red, Green, Blue};
var c: Color = Color.Green;

ou

enum Color {Red = 1, Green = 2, Blue = 3};
var c: Color = Color.Green;

Quando criamos um enum, usamos o “poder” da ide para que possamos programar de forma mais fácil, conforme a figura a seguir.

Any

Uma variável do tipo Any pode assumir qualquer valor.

var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

var list:any[] = [1, true, "free"];
list[1] = 100;

Void

O void é usado para determinar que um método não retorna nenhum valor, conforme o exemplo a seguir.

function warnUser(): void {
    alert("This is my warning message");
}

Classes

O conceito de classes no TypeScript é o mesmo de uma classe em qualquer linguagem orientada a objetos. As classes no TypeScript seguem o padrão ECMAScript 6 que em teoria será o “futuro” do JavaScript. A classe possui uma sintaxe muito familiar com c#, veja:

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
var greeter = new Greeter("world");

O construtor é definido pela palavra constructor. Métodos não necessitam da palavra function, bastando apenas usar`. Perceba que, no exemplo apresentado, não definimos visibilidade das propriedades da classe, nem o tipo de retorno do métodogreet`. É claro que podemos definir estes parâmetros, conforme o próximo exemplo.

class Greeter {
    private greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    public greet() : string {
        return "Hello, " + this.greeting;
    }
}

var greeter = new Greeter("world");

Visibilidade de métodos e propriedades

Métodos e propriedades de uma classe podem assumir a visibilidade: private, public e protected.

Herança

A herança entre uma classe e outra é definida pela palavra extends. Pode-se sobrecarregar métodos e usar a palavra super para chamar o método da classe pai, conforme o exemplo a seguir.

class Animal {
    name:string;
    constructor(theName: string) { this.name = theName; }
    move(meters: number = 0) {
        alert(this.name + " moved " + meters + "m.");
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(meters = 5) {
        alert("Slithering...");
        super.move(meters);
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(meters = 45) {
        alert("Galloping...");
        super.move(meters);
    }
}

var sam = new Snake("Sammy the Python");
var tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

Neste exemplo usamos o super da classe Snake para chamar o método construtor da classe pai Animal. Se isso não for claro para você, dê uma estudada em OO para que possa compreender melhor, pois estas características são da Orientação em Objetos como um todo, e não do TypeScript.

Accessors (ou métodos get/set)

Os Accessors visam proteger as propriedades de uma classe, pois você já deve saber que expor propriedades de uma classe não é algo legal 🙂

Os accessors do TypeScript são feitos pelas palavras get e set, e claro, deixe a sua propriedade como private. Veja o exemplo a seguir.

class Pessoa {
    private _password: string;

    get password(): string {
        return this._password;
    }
    
    set password(p : string) {
        if (p != "123456") {
            this._password = p;
        }
        else {
            alert("Ei, senha não pode ser 123456");
        }
    }
}

var p = new Pessoa();
p.password = "123456"; //vai exibir o erro

Métodos estáticos

É possível criar métodos estáticos definindo a palavra static antes do método. Existem dezenas de aplicações para métodos estáticos, sendo uma delas não precisar instanciar uma classe, como no exemplo a seguir.

class SystemAlert{
    
    static alert(message:string):void{
        alert(message);
    }
    
    static warm (message:string):void{
        alert("Atenção: " + message);
    }
    
    static error(message:string):void{
        alert("Erro: " + message);
    }
    
}

SystemAlert.alert("Oi");
SystemAlert.error("Não foi possível conectar na base de dados");

Interfaces

Uma interface define um contrato para a classe. A interface é criada da seguinte forma:

interface Ponto{
 x: number;
 y: number;
 x: number;
}

Para implementar a interface, usamos implements

class Ponto3d implements Ponto{
   (aqui implementamos x,y,z)
}

Funções

Vamos exemplificar algumas particularidades de uma função em TypeScript. A função pode ser criada fora de uma classe ou dentro, sendo as observações que faremos a seguir podem ser aplicadas em ambas.

Tome nota apenas que, em uma classe, não precisamos usar a palavra function para definir uma função, mas fora da classe precisamos.

Parâmetros com valores padrão

Pode-se definir um valor padrão para um parâmetro de uma função da seguinte forma:

function buildName(firstName: string, lastName : string = "Smith") {
}
//ou
class Foo{
  buildName(firstName: string, lastName : string = "Smith") {
  }
}

Parâmetros opcionais

Use o caractere ? para definir um parâmetro opcional.

class Foo{
  buildName(firstName: string, lastName? : string) {
     if (lastName){
           // blablabla
     }
  }
}

Parâmetros REST

Pode-se repassar um array de valores diretamente para um parâmetro. É válido lembrar que este modo só pode ser usado no último parâmetro da sua função. Exemplo:

class Foo{
 static alertName(firstName: string, ...restOfName: string[]) {
    alert(firstName + " " + restOfName.join(" "));
 }
}
Foo.alertName("Fulano","de","Tal");

Parâmetros no formato JSON

Umas das maiores facilidades do Javascript é repassar parâmetros no formato JSON. Com TypeScript é possível utilizar este mesmo comportamento, conforme o exemplo a seguir.

class Ponto{
    
    private _x : number = 0;
    private _y : number = 0;
    private _z : number = 0;
    
    constructor( p: {x:number;y:number;z?:number;}){
        this._x = p.x;
        this._y = p.y;
        if (p.z)
            this._z = p.z;
    }
    
    is3d():boolean{
        return this._z!=0;
    }
    
}

var p1 = new Ponto({x:10,y:20});

alert(p1.is3d());

Observe que no construtor da classe Ponto criamos o parâmetro p e na definição do seu tipo repassamos um objeto anônimo com três parâmetros, sendo que o parâmetro z é opcional.

Conclusão

Neste artigo vimos algumas funcionalidades do TypeScript, sendo ainda existem diversos tópicos a serem abordados. Gostaria de lhe encorajar a testar esta nova linguagem, e caso tenha dúvidas, não deixe de comentar abaixo. Sugira também novos artigos sobre TypeScript, estaremos avaliando cada pedido!