TypeScript, ame ou nem ligue

Se você aprendeu programação orientada a objetos com Java, C, C++ ou C#, e agora programa em JavaScript, deve ter sentido uma pequena dificuldade pra se adaptar. Se você já se adaptou e já programa em JavaScript há algum tempo o TypeScript é quase inútil pra você, exceto se você desejar usar Angular2, pois é seu framework padrão.

TypeScript

TypeScript é desenvolvida pela Microsoft, e é uma linguagem de desenvolvimento JavaScript em larga escala. Nela você pode escrever programas com estrutura de orientação a objetos, com interfaces, classe, métodos e atributos com nível de acesso, etc. Além de ter variáveis fortemente tipadas. O TypeScript pega o código escrito com a estrutura dele e transforma em JavaScript puro, para assim ser executado pelo browser, qualquer um deles, Node.js e por engines JavaScript que suportem ECMAScript 3.

Instalando

Se você usa NPM instalar, TypeScript é bem simples

$ npm install -g typescript

Você também pode instalar um plugin na sua IDE ou editor de texto como noSublime, Visual Studio, Eclipse, etc.

Usando

Vamos ao que interessa: como usar o TypeScript?

* Estou considerando que você instalou via npm e que vai usar por linha de comando, então vamos lá:

No exemplo a seguir criaremos uma interface e uma classe que a implementa, contendo um método que retorna string. Depois o objeto é instanciado e o método chamado.

1 2 3 4 5 6 7 8 9 10 11 12 13

interface Animal{ says() : string; } class Cat implements Animal{ says():string{ return “meow”; } } var cat = new Cat(); console.log(cat.says());

Salve o arquivo com o nome animal.ts, sempre com a extensão (ts).

Vá para o terminal, bash ou prompt de comando e acesse a pasta de nosso exemplo com o comando cd pasta/do/projeto

E execute.

$ tsc animal.ts

Ele irá gerar um arquivo com o mesmo nome, mas com extensão .js com o conteúdo semelhante a:

1 2 3 4 5 6 7 8 9 10 11 12

var Cat = (function () {     function Cat() {     }     Cat.prototype.says = function () {         return “meow”;     };     return Cat; })(); var cat = new Cat(); console.log(cat.says());

Então você pode executar esse arquivo com $ node animal ou adiciona-lo ao html para executar via browser.

Parece pouca coisa né? Mas não pare por aqui, continue…

Playground

Você pode testar códigos TypeScript no Playground, que é um pequeno editor capaz de identificar erros de sintaxe e executar seus códigos TypeScript, convertendo-os para JavaScript. Ele também é capaz de autocompletar seu código mostrando as opções disponíveis.

Tipos de Variáveis

Com TypeScript você pode definir o tipo das variáveis, assim como em linguagens como Java por exemplo.

O caminho para se declarar uma variável é o seguinte:

1	var NOME_DA_VARIAVEL : TIPO = VALOR

Você pode usar também a keyword let para variáveis limitadas ao escopo no bloco. Ou const para constantes.

Boolean

O tipo mais básico, apenas  true/false

1	var isDone: boolean = false;

Number

Assim como em JavaScript, em TypeScript todos os números são ponto flutuante, assumindo o tipo number. Nele também são aceitos números hexadecimais, decimais literais, binários e octais, veja:

1 2 3 4

var decimal: number = 6; var hex: number = 0xf00d; var binary: number = 0b1010; var octal: number = 0o744;

String

O tipo string aceita dados do tipo texto, dentro de aspas simples ( ‘ ) ou aspas duplas ( “ ).

1 2	var name: string = “bob”; name = ‘smith’;

Você também pode usar tamplate strings, para isso você precisa usar crase (  ), e colocar seu texto dentro, e pode usar expressões assim: ${ epressão }:

1 2 3 4 5

var name: string = `Gene`; var age: number = 37; var sentence: string = `Hello, my name is ${ name }. I‘ll be ${ age + 1 } years old next month.`

Note que a variável sentence recebe um texto com quebra de linha, o que só é possível fazer usando (  ).

Array

Existem duas maneiras básicas de se criar arrays em TS, a primeira é a mais comum, utilizando apenas os colchetes [ ] precedidos pelo tipo do array:

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

A segunda, conhecida como generics, usa <> para definir o tipo, ficando mais ou menos assim: Array<tipo>:

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

Você ainda pode criar tipos mistos e complexos de arrays, como por exemplo arrays que tem como tipo uma classe, ou seja um array de objetos dessa classe.

1 2 3 4 5

//Misto var x: [string, number]; //Complexo var myArray:MyClass[] = new Array();

Enum

Quem usa C# conhece muito bem esse DataType, que pode ser usado para dar nomes amigáveis a valores numéricos. Ele é geralmente usado para determinar status de alguma coisa, ou coisas semelhantes. Como no exemplo a seguir:

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

No exemplo, a variável c vai receber o valor 1, pois Green é a segunda opção da lista, lembrando que a lista é iniciada sempre pelo número 0, a não ser que você mesmo determine o número de cada opção:

1 2	enum Color {Red = 1, Green = 2, Blue = 4}; let c: Color = Color.Green;

Se você precisar do nome da opção:

1	var colorName: string = Color[2];

Any

Como o nome sugere, uma variável com o tipo any pode assumir qualquer valor, ou seja é uma variável dinamicamente tipada. Veja:

1 2 3

let notSure: any = 4; //é number notSure = “maybe a string instead”; //agora string notSure = false; // e agora boolean