O que é Type Script?

Em algum lugar ou em alguma situação você já deve ter se deparado com este termo, e se você for como eu deve ter se perguntado a mesma coisa: “Mais o que diabos é TypeScript?”. Bom muitas pessoas atribuem o TypeScript como uma linguagem de programação (assim como eu também pensava), mas como diz o próprio site do TypeScript ele um superset, um conjunto de ferramentas que adiciona "super poderes" digamos assim, ao JavaScript.

Talvez diferente de muitas pessoas que conheceram esse superset já tendo uma boa base do JavaScript, eu já comecei direto no TypeScript , até então eu pensava que JavaScript é TypeScript eram linguagem diferentes, pois eu ainda estava iniciando minha caminhada no mundo de desenvolvimento mobile utilizando o Framework IONIC que utiliza como base o Angular que foi a primeira ferramenta de desenvolvimento a utilizar o TypeScript.

TypeScript nada mais é que um superset do ECMAScript 6 que, por sua vez, é um superset do ECMAScript 5, que usamos mais frequentemente como base para nosso clássico JavaScript. Isso significa que praticamente qualquer código JavaScript é também um código TypeScript.

Diagrama que compara o TypeScript com as versões do ECMAScript.

Lançado pela Microsoft, o TypeScript foi criado por um arquiteto de softwares chamado Anders Hejlsberg, que participou da criação de outras linguagens muito importantes como C#, Delphi e Pascal.

Instalação

A instalação e muito simples, basta copiar o código e colocar em seu terminal. 

npm install -g typescript

Se você já utiliza o JavaScript então eu tenho certeza que você conhece o código acima e também o NodeJs que é necessário para poder rodar este código. Feito isso agora sua maquina está pronta para utilizar as ferramentas do TypeScript.

Você também pode utilizar uma IDE de sua preferencia eu particularmente gosto muito do Visual Studio Code que nós trás um integração muito boa com o TypeScript e que também e o mais indicado para trabalhar com ele, mais você pode utilizar qualquer outro editor de sua preferencia basta instalar os Plugins necessários. 

Super Poderes

Então você deve estar se perguntando "Ta mais quais são esses tais super poderes?". Bom na verdade são muitos, mais muitos mesmo, que seria quase impossível de mostrá-los todos aqui. Mais vamos ver alguns de seus principais recursos.

E um deles está na possibilidade de descobrir erros no processo de desenvolvimento utilizando o IntelliSense (Inteligência) da IDE que utilizamos. Isso nós da um ganho absurdo de produtividade veja abaixo um exemplo do IntelliSense em ação.

O TypeScript me avisou que aquele método não estava retornando corretamente.

Além de podemos consultar as documentações das APIs enquanto escrevemos nossos códigos.

Com isso, tenho certeza que o método store está retornando corretamente.

Variáveis 

Como vocês já devem ter percebido uma das grandes novidades do JavaScript e a possibilidade de declarar uma variável e já sair utilizado sem precisar atribuir um tipo a ela String, Inteiro, boolean e etc. E isso que diferencia de muitas outras linguagem tipadas como Java, C, C++ entre outras.

Com o TypeScript você tem um controle maior sobre elas como o próprio nome já diz esse superset adiciona o poder da tipagem estática, veremos abaixo quais são esses tipos e suas utilizações:

Any

let a: any = 'anything'

O tipo any não diferencia muito do JavaScript, ela pode receber qualquer tipo. 

Boolean

let a: boolean = true

O tipo boolean funciona da mesma forma como nas outras linguagens recebe apenas dois valores TRUE ou FALSE.

Number

let a: number = 10

a = 10.2

a = 0x01

Aqui começa a ser diferente no TypeScript o tipo Number e tratado como qualquer numero seja ele binário, hexadecimal etc. 

String

let a: string = 'I am a string'

Strings têm uma variação muito interessante, que são os Template Strings. Você pode quebrar linhas e inserir variáveis muito mais facilmente que no JavaScript. Para isso, basta abrir a string com o caractere acento grave (`).

let message: string = 'Hello, World.'

let a: string = `

<div>

<p>${message}</p>

</div>`

Array

Há duas formas de se utilizar uma array.

let a: any[]

let b: Array<any>

Ambas representam a mesma coisa. A primeira seria uma syntax sugar da segunda, que utiliza um recurso chamado Generics, muito comum em outras linguagens. Não vamos entrar em detalhes nisso agora.

Tuple

let a: [string, any] = ['key', 'value']

Outro tipo bem comum em outras linguagens são as tuples. É bem semelhante a um array, porém com tamanhos e valores de tipos bem definidos. São bastante úteis, porém pouco explorados. Tuples são muito flexíveis. Isso te lembra alguma coisa?

let a: [string, any][] = [

['url', 'http://localhost'],

['port', 8080],

]

Enum

enum CardSuits { Clubs, Hearts, Spades, Diamonds }

São conjuntos ordenados de valores, que você pode utilizar desta forma.

if (selectedCardSuit == CardSuits.Clubs) { ... }

Seria uma forma mais elegante de escrever isso.

if (selectedCardSuit == 0) { ... }

Cada elemento retorna um valor, partindo do zero.

CardSuits.Clubs // 0

CardSuits.Hearts // 1

CardSuits.Spades // 2

CardSuits.Diamonds // 3

Você pode definir o valor inicial da contagem desta forma.

enum CardSuits { Clubs = 1, Hearts, Spades, Diamonds }

Ou até mesmo definir o valor de cada elemento.

enum Level { Default = 1, Premium = 10, Moderator = 20, Admin = 50 }

if (user.level < Level.Premium) {

return false

}

FECHA CHAVE {..}

Como eu disse esses são alguns dos principais e também os que mais utilizaremos em nossos projetos. Claro que existem muito mais tipos que seria quase impossível mostrar todos eles aqui, mais para não prolongar muito este artigo veremos em um próximo como funciona os Objetos e Funções, e nesse próximo artigo veremos isso na pratica onde vamos construir juntos um pequeno projeto de exemplo.

Para saber mais consulte a documentação do TypeScript que por sinal e muito simples e contem vários exemplos e até o próximo artigo.