Tipos básicos do TypeScript - Parte 1

O que um programador deve aprender, partindo do JavaScript, para começar a utilizar a linguagem TypeScript? A resposta está no próprio nome da linguagem, traduzido do inglês: tipos! Além disso, uma base bem estruturada permite aprender com maior facilidade assuntos mais complexos sobre TypeScript.

Tabela de conteúdos

• Primitivos, arrays e any
• Tipos nas variáveis
• Funções
• Tipos de objeto
• Union types
• Conclusão

Primitivos, arrays e any

Primitivos

Vamos começar pelos primitivos. Mas, primeiro, o que seria isso? Tecnicamente falando, um primitivo é um dado que não é um objeto, e não possui métodos ou propriedades. Agora, simplificando: são tipos que utilizamos constantemente no JavaScript!
Sabe quando você declara uma variável e atribui um número, texto ou booleano? Então, embora não vejamos especificamente o seu tipo, os tipos delas fazem parte desse grupo! São eles: string, number, boolean, null, undefined, e outros. No TypeScript não é diferente, continuamos utilizando esses tipos frequentemente, mas dessa vez nós declaramos os tipos.

• string é um texto. Exemplo: "Olá, mundo!"
• number é um número. Exemplo: 123
• boolean é um verdadeiro ou falso. Exemplo: true

OBS: utilize os tipos sempre com letra minúscula!

Arrays

Os tipos dos arrays seguem quase a mesma ideia, a diferença é que temos um [] no final da declaração para mostrar que é um array, é bem simples. Para declarar o tipo de um array, basta escrevermos o tipo seguido de [].
Por exemplo:

• Um array de strings: string[]
• Um array de números: number[]
• Um array de booleanos: boolean[]

É possível, também, declararmos um array dessa maneira: Array<string>. Seria a mesma coisa, use o que achar mais confortável.

Any

A tradução desse tipo, para português, é qualquer. Ou seja, com esse tipo assumimos que uma variável ou dado pode ser de qualquer tipo, e isso faz com que o TypeScript não cheque se há erros de tipagem no código envolvendo a variável ou dado com esse tipo. Por exemplo:

let valor: any;

valor = 20;
valor = "vinte";
valor = true;

// o TypeScript não irá acusar nenhum erro de tipagem, pois valor é
// do tipo any.

Basicamente, utitilizando o any, faremos com que o código volte a se comportar como JavaScript. Isso é uma maneira de resolver algumas mensagens de erro que o TypeScript exibe quando colocamos (ou deixamos implícito) o tipo errado, mas tome cuidado ao usar o any, tente ser o mais organizado possível com seu código ao utilizar esse tipo!
A documentação oficial do TypeScript inclusive recomenda utilizar o tipo unknown (traduzindo: desconhecido) quando queremos dar um tipo a algo que não sabemos.

Tipos nas variáveis

Podemos definir um tipo nas variáveis que declaramos. O tipo vem depois da variável, seguindo esse formato:

// Variável numérica
let numero: number = 30;

// Variável de texto
let texto: string = "Variável do tipo string"

// Variável de verdadeiro ou falso
let booleano: boolean = true;

Mas, caso você esqueça de colocar o tipo, o TypeScript faz isso para você automaticamente (na maioria dos casos). O valor que inicializarmos a variável vai ditar o seu tipo:

let numero = 55; // TypeScript define o tipo como number
let texto = "Texto qualquer"; // TypeScript define o tipo como string
let booleano = false; // TypeScript define o tipo como boolean

Então, nas vezes que você esquecer de declarar o tipo de uma variável, não se preocupe! Provavelmente o TypeScript terá declarado o tipo correto para você, e nenhuma mensagem de erro aparecerá!

Funções

Nas funções, podemos definir um tipo tanto nos parâmetros que são passados pela função, quanto no resultado dessa função. Para colocar tipo nos parâmetros, devemos colocar o nome do parâmetro, seguindo do seu tipo. Já para colocar um tipo no retorno da função, devemos definir o tipo após os parâmetros da função. Segue um exemplo para melhor entendimento:

// Função do tipo number, que recebe um parâmetro do tipo number
function soma(numero: number): number {
    return numero + 5;
}

// Função do tipo string que não recebe nenhum parâmetro
function olaMundo(): string {
    return "Olá, mundo!"
}

Na função soma, estamos recebendo um parâmetro numérico, e retornamos uma soma (o tipo da soma é numérico, logo, a função é do tipo number).
Na função olaMundo, não recebemos nenhum parâmetro, mas retornamos um texto, o que faz a função ser do tipo string.

Tipos de objeto

Os tipos de objeto também são muito utilizados no TypeScript. Para definir um tipo de objeto é simples: basta definir a propriedade e, em seguida, o tipo dessa propriedade, no seguinte formato: propriedade: tipo. Por exemplo, na função a seguir precisamos de nome e sobrenome do usuário:

// Função para mostrar nome e sobrenome de um usuário
function mostraUsuario(usuario: { nome: string, sobrenome: string }) {
    console.log(`Nome: ${usuario.nome}`);
    console.log(`Sobrenome: ${usuario.sobrenome}`);
}

mostraUsuario({ nome: "John", sobrenome: "Doe" });

Ou ainda, vamos supor que o parâmetro de sobrenome dessa função seja opcional. Para isso, colocamos ? na frente do nome da propriedade.

// Função para mostrar o nome (obrigatório) e sobrenome (opcional)
function mostraUsuario(usuario: { nome: string, sobrenome?: string }) {
    // ...
}

// Ambos irão funcionar
mostraUsuario({ nome: "John", sobrenome: "Doe" });
mostraUsuario({ nome: "John" });

Por último, caso você não coloque nenhum tipo na propriedade do objeto, o TypeScript assumirá que o tipo é any.

Union Types

Por fim, temos os union types (ou, traduzindo, "união de tipos"). Esse conceito é um pouco mais complicado do que os anteriores, tem mais teoria por trás, e requer um pouco mais de atenção. Um union type é uma união de dois ou mais tipos, e o valor pode ser de qualquer um desses tipos escolhidos. Por exemplo, temos uma função que mostra o preço de um produto:

function mostraPreco(preco: string | number) {
    console.log(`Preço: R$ ${preco}`);
}

// Isso é aceito
mostraPreco(150);
// Isso também é aceito
mostraPreco("250");
// Isso NÃO é aceito, pois é um tipo boolean!
mostraPreco(true);

Mas, se temos uma variável que pode ser string ou number, como que faremos para lidar com ela? Nesse caso, devemos utilizar operações ou métodos que sejam compatíveis com ambos os tipos, por exemplo:

function mostraPreco(preco: string | number) {
    console.log(preco.valueOf());
}

No exemplo acima, o código não acusaria erro, pois o método valueOf() é compatível tanto com tipo string quanto tipo number. Agora, em casos que queremos utilizar uma operação ou outra que seja exclusiva de um tipo, devemos tratar o código, verificando o tipo do parâmetro que foi fornecido, assim:

function mostraPreco(preco: string | number) {
    if (typeof preco === "string") {
        console.log("Preço: ", preco.toUpperCase());
    } else {
        console.log("Preço: ", preco.toPrecision(2));
    }
}

Dessa maneira, utilizaremos um método de texto para caso o tipo da variável seja string, se não, usaremos um método número para caso a variável seja do tipo number. Dessa maneira, o TypeScript não acusará erros, pois o código estará adequado a cada caso.

Para simplificar essa explicação, podemos utilizar uma imagem para facilitar o entendimento desses tipos:

No caso da imagem, do lado esquerdo teríamos as frutas (banana, laranja, etc), que podem ou não ser da cor vermelha. No lado direito, teríamos os alimentos vermelhos (tomate, pimenta, etc), que podem ou não ser frutas. No centro, teríamos um alimento que é tanto fruta quanto vermelho: a maçã. Se fossemos levar pro lado da programação, a maçã poderia usar métodos de frutas, quanto métodos de alimentos vermelhos, assim como o exemplo da string | number.

Conclusão

Grande parte deste artigo não tem muita teoria por trás (com exceção dos Union Types), sendo necessário praticar para se adaptar a como trabalhar com tipos em TypeScript.
Pratique com projetos novos e antigos. Eu recomendo transformar tudo em tipos nos seus projetos, desde uma simples variável que não faça nada demais, até refatorar projetos antigos feitos em JavaScript, passando a definir tipos pro projeto.

Por fim, caso queira consultar e estudar a documentação oficial do TypeScript: https://www.typescriptlang.org/docs/

Obrigado!!