TypeScript – Escrevendo JavaScript tipado

Posted on by Alex Hiroshi

Assim como o post anterior, esse é mais um apenas para estudos. Dessa vez falando um pouco de TypeScript.

Eu sempre fico com um pé atrás com esses pré-processadores ou coisas do tipo que você escreve uma coisa para ter como resultado um js ou css. Com TypeScript foi diferente, talvez por qualquer javascript ser um TypeScript e também pela estrutura tipada que ajuda bastante na hora de escrever um código em que outras pessoas vão dar manutenção.

TypeScript pode ser compilado com Node.js ou, para quem é mais acostumado, com o próprio Visual Studio.
Eu comecei a estudar com o VS 2013, mas também é possível usar a versão 2012. No VS 2013 é só instalar o TypeScript para VS 2013 e no 2012 também existe um plugin.

Antes de começar a escrever o código no VS, eu gosto de alterar uma configuração para que os .js gerados fiquem em uma outra pasta – por padrão elas são geradas no mesmo local dos .ts. Acho mais organizado deixar os arquivos .ts separados dos .js.
No VS 2012 você precisa editar o arquivos *.csproj do seu projeto. Dentro desse arquivo você vai encontrar duas tag <PropertyGroup/>, uma de debug e outra de release. Eu adiciono nas duas tags a linha que informa o diretório de saída dos arquivos:

XHTML
1
<TypeScriptOutDir>$(ProjectDir)assets\js</TypeScriptOutDir>

Nesse caso o .js é gerado no diretório assests/js e os .ts eu deixo sempre em uma pasta _ts. A estrutura do projeto fica assim:

  • assets
    • js
      • scripts.js
      • _ts
        • scripts.ts

No VS 2013 você pode fazer essa configuração editando as propriedades do seu projeto. Botão direito no projeto > Properties (Alt+Enter), clique na aba TypeScript Build e na seção Output em Redirect JavaScript output to directory e é só escolher o local que os .js serão gerados.

TypeScript - Trocar diretório do build

Com TypeScript você pode escrever códigos utilizando classes, módulos, interfaces e com os tipos (boolean, number, string, array, enum, any e void).
Os tipos nas variáveis são declarados com dois pontos e o tipo após o nome da varíavel. Exemplo:

JavaScript
1
2
var nome: string = "Alex";
var diaAniversario: number = 27;

Também é possível declarar os mesmos tipos no retorno de uma função:

JavaScript
1
2
3
function nomeCompleto(nome: string, sobrenome: string): string {
    return nome + " " + sobrenome;
}

Usando o VS, ao tentar chamar essa função passando um parâmetro que não seja uma string, ele já te avisa que algo está errado.
TypeScript - Tipo de parâmetro errado
Você também pode usar interface para definir um tipo:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
interface Pessoa {
    nome: string;
    sobrenome: string;
    idade: number;
}
 
function informacoes(pessoa: Pessoa): string {
    return pessoa.nome + " " + pessoa.sobrenome + " tem " + pessoa.idade + " anos";
}
 
informacoes({ nome: "Alex", sobrenome: "Hiroshi", idade: 0 });
informacoes({ nome: "Alex", sobrenome: "Hiroshi" }); // Erro. Falta a idade

Interfaces também podem ser utilizadas com as classes para definir que uma classe precisa implementar alguns métodos.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
interface ValidacoesPessoa {
    validaIdade(): boolean;
}
 
class Pessoa implements ValidacoesPessoa {
    private _idade: number;
    constructor(idade: number) {
        this._idade = idade;
    }
 
    imprimir(): void {
        if (this.validaIdade())
            console.log("Você tem mais de 18 anos");
        else
            console.log("Você tem menos de 18 anos");
    }
 
    validaIdade(): boolean {
        return this._idade > 18;
    }
}
 
var p = new Pessoa(20);
p.imprimir();

Uma coisa bem legal são as classes do ECMAScript 6 que podem ser usadas no TypeScript. Com isso você pode escrever um código mais bonito e prático, já que escrever classes no javascript é bem chato.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class Animal {
    nomeAnimal: string;
    constructor(nome: string) { this.nomeAnimal = nome; }
 
    andar(): void { console.log(this.nomeAnimal + " está andando..."); }
}
 
class Cachorro extends Animal {
    constructor(nome: string) { super(nome); }
 
    latir(): void { console.log(this.nomeAnimal + " está latindo..."); }
}
 
class Gato extends Animal {
    constructor(nome: string) { super(nome); }
 
    miar(): void { console.log(this.nomeAnimal + " está miando..."); }
}
 
var c = new Cachorro("Bob");
var g = new Gato("Batatinha");
c.andar();
c.latir();
g.andar();
g.miar();

Para organizar o código e não deixar as variáveis e funções globais, você pode usar módulos.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
module Animal {
    export class Cachorro {
        private _nome: string;
        constructor(nome: string) { this._nome = nome; }
 
        andar(): void { console.log(this._nome + " está andando..."); }
    }
}
 
var c = new Animal.Cachorro("Bob");
c.andar();

Repare que nesse caso, é preciso usar um “export” na classe para que ela fique visível fora do módulo, sem isso você não vai conseguir dar um new Animal.Cachorro(..).

TypeScript ainda tem outras coisas bem legais como os generic types, parâmetros opcionais e parâmetros com valor default, uso de lambda entre outras coisas que estão disponíveis no site. Caso você não queira instalar nada para estudar, é só usar o Playground para brincar.

Eu tinha feito uma paginação simples com jQuery e resolvi passar esse código para TypeScript. O projeto está no meu GitHub.