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 |
0 comentários: