TypeScript - Aplicando as tipagens

Um dos principais recursos que o TypeScript traz é a utilização da tipagem estática para o JavaScript (que trabalha com tipagem dinâmica). Desta forma o desenvolvedor tem a responsabilidade de declarar qual o tipo da variável que será utilizada e dentre os tipos disponíveis, nós temos:

Nossas Variáveis

Primeiramente, para declarar variáveis utilizando o TypeScript, podemos utilizar a seguinte sintaxe:

let numero: number;
let texto: string;
let status: boolean;

Também podemos declarar e atribuir um valor:

let idade: number =  23;
let nome: string = 'Jhony';
let statusPublicacao: boolean = true;

Neste caso a tipagem garante que as variáveis devem conter dados dos seus respectivos tipos. Utilizando o Visual Studio Code (por exemplo) podemos ver que, caso alguma variável receba algum valor diferente do seu tipo declarado anteriormente, o TypeScript apresentará um aviso:

Nossas constantes

Agora, seguindo a mesma maneira que declaramos as variáveis no TypeScript, precisamos apontar o tipo das constantes, com a sintaxe:

⚠ Vale lembrar que, no caso das constantes, devemos inicializar a constante com o valor definido, ou seja, não é possível alterar seu valor posteriormente.

Falando um pouco sobre arrays

Quando vamos trabalhar com arrays no TypeScript é preciso se atentar para algumas particularidades, primeiramente, podemos trabalhar com os arrays que recebem dados de apenas um tipo, da seguinte forma:

let carros: string[] = [];
carros.push('Ferrari');
carros.push('Lamborghini');

Ou podemos inicializar o array com os valores:

let animais: string[] = ['Cachorro', 'Gato', 'Peixe'];

Agora perceba que em ambos os casos, se tentarmos adicionar algum valor de um tipo diferente do que foi declarado anteriormente, vamos obter um aviso:

Neste caso tentamos adicionar um valor ao nosso array “carros” utilizando o método push(), porém não podemos pois o array só aceita strings e não numbers.

Array com mais de um tipo

O TypeScript traz este recurso, onde podemos trabalhar com arrays que recebem mais de um tipo, neste caso ao declarar o array é necessário passar quais tipos de dados que esse array estará apto a receber:

let carros: (string | number)[] = ['Ferrari', 2015,'Lamborghini', 2020];

Também é possível definir exatamente qual o conteúdo que o array estará apto a receber, além do tipo:

let faculdade: ('Formado' | number)[] = ['Formado', 2022];

Neste exemplo acima, o array cursos não irá aceitar nenhuma string exceto “Formado”.

Entendendo melhor os tipos

Conforme mostrado na tabela que está localizada no inicio deste artigo temos vários tipos diferentes, portando vamos falar um pouco deles:

String - é um tipo básico e fundamental no JavaScript tanto para construção aplicativos web e mobile quanto para a construção de programas no lado do servidor. Como em outras linguagens, usamos o tipo string para nos referirmos a tipos de dados textuais. Assim como o JavaScript, o TypeScript também usa aspas duplas (“) ou aspas simples (‘) para envolver os dados da string. Podemos definir uma variável string da seguinte forma (claro que vou mostrar outro exemplo):

let filme: string = 'John Wick';
filme = 'Duna';  // Mudei o Valor

Number - No TypeScript assim como no JavaScript, todos os números são valores de ponto flutuante e recebem o tipo number. Além dos literais hexadecimais e decimais, o TypeScript também suporta literais binários e octal introduzidos no ECMAScript 2015:

let numero: number;
numero = 4;
numero = 5 + 8;

let outroNum: number = 5.8;
let hexadecimalNum: number = 0xf00d;
let binarioNum: number = 0b1010;
let octalNum: number = 0o744;

Boolean - Sem dúvidas é o tipo mais básico de dados que tanto o JavaScript quando o TypeScript tem, ele recebe apenas o valor true ou false:

let vencido: boolean = true;
vencido = false; // Mudei o Valor

Array - é um tipo muito utilizado em JavaScript. E em TypeSript podemos declará-la de duas maneiras:

1ª) é utilizando o tipo do elemento seguido por :

let pratoDia: string[] = ['Arroz', 'Feijão', 'Couve', 'Bife', 'Batata', 'Farora'];

2ª) é utilizando o tipo Array genérico:

let pratoDia: Array<string> = ['Arroz', 'Feijão', 'Couve', 'Bife', 'Batata', 'Farora'];

Tuple(Tupla) - permitem que você expresse um array onde o tipo e um número fixo de elementos é conhecido, mas não precisa ser o mesmo:

let tuple: [string, number, string, number];
tuple = ['hello', 1, 'world', 2];

console.log(tuple[0]);
console.log(tuple[1]);

No exemplo acima temos um número definido de elementos na array, 4 e ele são duas strings e dois números. Se definirmos a tupla alterando as ordens que os tipos foram de declarados mais uma vez o Visual Studio indicará um erro.

Enum - é um tipo de dados que não existe no JavaScript mas foi adicionado ao TypScript com o intuito de fornecer nomes mais amigáveis a conjuntos de valores numéricos. Enums são muito comuns em linguagens como Java e C#:

enum cor {Vermelho, Verde, Azul, Amarelo};
enum outraCor {Vermelho = 1, Verde = 2, Azul = 4, Amarelo};

Se imprimirmos o enum cor, veremos que os valores de Vermelho será 0, Verde será 1, Azul 2 e Amarelo será 3. Assim como se imprimirmos o enum outraCor, Vermelho será 1, Verde 2, Azul 4 e Amarelo que não foi atribuído valor será 5.

Any - é um tipo de dados muito utilizado para quem está migrando do JavaScript para o TypeScript (por preguiça, desculpe mas é verdade) ou quem está recebendo os dados de uma outra biblioteca e não sabe seu valor. E ele literalmente quer dizer qualquer um. Então declarando uma variável como o tipo any podemos atribuir qualquer valor para ela:

let qualquerValor: any;
qualquerValor = 'Água';
qualquerValor = 4; // Mudei o Valor
qualquerValor = true; // Mudei o Valor

Void - é muito usado junto com funções, serve para dizer que o valor é vazio, não é atribuído nada.

function print(msg: string ): void {
  console.log(`Função sem retorno: ${msg}`);
}

print('Escreve algo na tela');

⚠ ATENÇÃO - Declarar variáveis do tipo void não é útil porque você só pode atribuir undefined ou null a elas.

Criando tipos personalizados

Existe a possibilidade de criarmos tipos para trabalhar com a nossa aplicação. Seguindo o exemplo dos arrays, podemos criar um array com tipo para usá-lo quantas vezes quisermos, facilitando o desenvolvimento:

type Formados = ('Formado' | number)[];

let formado: Formados = ['Formado', 200];
let formado2: Formados = ['Formado', 700, 'Formado', 800];

Podemos criar tipos para trabalhar com objetos também, da seguinte forma:

type Animal = {
    nome: string;
    idade: number;
}

let cachorro: Animal = {
    nome: 'Rex',
    idade: 3
}

Podemos criar também utilizando a interface (que é o padrão mais atual):

interface Animal = {
    nome: string;
    idade: number;
}

let cachorro: Animal = {
    nome: 'Rex',
    idade: 3
}

Neste caso criamos o tipo Animal, que possui as propriedades nome (string) e idade (number) e declaramos um objeto “cachorro” para este tipo. Caso alguma propriedade não esteja de acordo com o tipo, o TypeScript irá apresentar um aviso:

Foi declarado um objeto “gato” do tipo “Animal”. Porém na propriedade “idade” passamos a string “dois” no lugar de um number (2), e então, o TypeScript apresenta um aviso que a propriedade idade declarada no tipo Animal espera um number. Desta forma é possível criar tipos conforme a necessidade da aplicação que está sendo desenvolvida, tanto para a utilização de arrays como em objetos.

A tipagem estática nos ajuda a desenvolver um código mais confiável e robusto, diminui possíveis erros futuros e ainda pode tornar nossa IDE mais inteligente com recursos de autocomplete apresentando assim maior eficiência. Claro que tudo deve ser colocado no papel, afinal, para equipes (ou pessoas) acostumadas a trabalhar com JavaScript e em projetos que não são tão complexos, devemos considerar se realmente há a necessidade de alguma migração e levar em conta toda a curva de aprendizagem que a equipe terá para aplicar o TypeScript.

Fontes onde pesquisei esse conteúdo:

• https://www.typescriptlang.org/docs/handbook/2/objects.html