Primeiros passos com TypeScript

O que é TypeScript

O TypeScript não é uma nova linguagem, ele pode ser definido como um superset do javascript, ou seja um javascript "melhorado", isso significa que os códigos que são válidos em javascript também são válidos em typescript, TypeScript possui funcionalidades/features adicionais que o js tradicional não traz suporte ainda. Os browsers também não compreendem o typescript, portanto é necessário um transpilador entre ele e o browser. Esse transpilador vai re-escrever o código de forma que os browsers consigam compreender.

TypeScript features:

• Tipagem forte

Quando definimos uma variável precisamos especificar qual o seu tipo, há casos que o tipo é identificado sem a necessariamente ser declarado. Utilizar essa funcionalidade torna o código mais previsível e mais fácil de encontrar bugs caso algo dê errado.

• Erros em tempo de compilação

Isso permite que seja possível visualizar os erros em tempo de compilação e não somente em tempo de execução, diante disso é possível fixar esses erros antes de iniciar o programa.

• Great tooling

  Isso permite que a intellisense dos editores de texto consiga prever com maior facilidade os tipos das variáveis que estão sendo trabalhadas.

Getting Start

Inicialmente é necessário instalar o typescript globalmente em nossa máquina, utilizando o gerenciador de pacotes da sua preferência, yarn ou npm.

// Instalando typescript
ts|⇒ yarn add typescript
// Verificando versão
ts|⇒ tsc -v
Version 3.9.5
// Criando o arquivo em que vamos trabalhar
ts|⇒ touch main.ts

Tipos em TypeScript

Declarando tipos

Na maioria das vezes o próprio typescript consegue inferir qual o tipo de cada variável, apenas em momentos específicos os tipos necessitam ser explicitamente declarados. Os diferentes tipos em Ts são:

let a: any;
let a: number;
let a: boolean;
let a: string;
let a: number[] = [1, 2, 3];
let a: any[]= ['A', 1, true, false];

Type Assertions

Para variáveis iniciadas com o valor any, o ts não reconhece qual seus métodos os type assertions são formas de informar, de informar quais o tipo daquela variável após sua inicialização. Type Assertion é unicamente uma forma de dizer ao compilador ts qual a o tipo daquela variável e dessa forma podermos acessa a intellisense.

let message;
let message = "abc" 
let alternativeWay = (message as string).endsWith('c')
let endsWithC = (<string>message).endsWith('c')

Custom types in TypeScript

Nesse caso em específico nossa função tem apenas dois parâmetros mas existem situações em que trabalhando com situações mais complexas é possível ter diversos parâmetros, nessas situações é usual agrupar todos esses parâmetro em um único parâmetro como no parâmetro a seguir.

/*Situação problemática*/
let drawPoint = (point) => {
    //Suponhamos um algorítimo que vai desenhar na tela
    //e precisa das cordenadas x e y
    //Acessadas por point.x, point.y
}

drawPoint({
    x: 1,
    y: 2
})

Na situação acima caso o objeto que seja passado não tenha as chaves e valores esperados pela função há grandes chances de que esse programa quebre durante o tempo de execução. Uma forma de prevenir essa situação é passar a custom type para esse parâmetro da seguinte forma.

/*Situação resolvida*/
/*Inline Notation*/
let drawPoint = (point: {x: number, y:number}) => {
    //...
}

/*Situação resolvida*/
/*Utilizando Interfaces*/
interface Point = {
    x: number,
    y: number,  
}
let drawPoint = (point: Point) => {
    //...
}

Acima temos as duas abordagens de custom types, inline Notation e utilizando interfaces, utilizar interfaces leva certa vantagem sobre o inline pois tem uma abordagem mais limpa, em caso de muitos parâmetros a primeira pode se tornar confusa, além do fato de que as interfaces podem ser reutilizadas em diversos lugares.