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 no Sublime, 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.

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:

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:

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

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:

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 (  ).

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 }:

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:

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

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

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.

//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:

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:

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

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

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:

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

Continua…

Por enquanto é só, e já é muito. Na parte 2 deste post falaremos sobre classes, interfaces, herança, acessors, etc. Fique ligado.

 

Jayr Alencar

Doutorando em Ciências da Computação no Centro de Informática da Universidade Federal do Pernambuco (CIn - UFPE); Mestre pela mesma instituição; Formado em Análise e Desenvolvimento de Sistemas; Católico; Fã de O Senhor do Anéis.

Você pode gostar...

4 Resultados

  1. 22 de junho de 2016

    […] Note que nos atributos da classe AppComponent foram definidos tipos, para saber mais sobre tipos de variáveis veja o post TypeScript, ame ou nem ligue. […]

  2. 22 de junho de 2016

    […] Para que você possa acompanhar melhor este texto, sugiro que leia o primeiro da série: TypeScript, ame ou nem ligue, que traz coisas básicas sobre o TS, ensinando como instalar, executar, tipos de variáveis, […]

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *