Typescript pra quem sabe Javascript

O básico de Typescript para quem sabe Javascript

Criando uma função

Vamos começar com um método que só recebe um nome (ou seja, tipo string) e retorna esse mesmo nome.

Em Javascript seria só fazer alguma das opções abaixo:

// função padrão
function retornaNome(nome) {
  return nome;
}

// Atribuindo uma função anônima para uma variável
const retornaNome = function (nome) {
  return nome;
};

// Arrow function
const retornaNome = (nome) => nome;

Mas independentemente do modo que você declare sua função (e são muitas possíveis), em Typescript o seguinte erro será retornado:

Variable 'retornaNome' implicitly has an 'any' type.(7005)

Lembra do Static Typing? Pois é! Agora todo parâmetro recebido em um método terá de ter seu tipo declarado. Então vamos resolver o caso:

// função padrão
function retornaNome(nome: string) {
  return nome;
}

Resolvido! Tudo beleza agora! Mas e se eu quiser ter certeza que ao final a função vai devolver uma string e não uma loucura como um number, por exemplo? Voltemos para o código:

const retornaNome = (nome: string): string => {
  return nome;
};

Pronto! Essa declaração : string logo após os parênteses que recebe os parâmetros da função diz que obrigatoriamente deve ser retornada uma string. Tanto é que se você quiser testar pode trocar para number e verá que o seguinte erro será retornado: “ Type 'string' is not assignable to type 'number'.(2322)

E digo mais, somente pela zoeira, se você mudar o return para return parseInt(nome); (o que vai fazer com que seja retornado um inteiro), o erro vai embora (inteligentão esse Typescript).

E mais uma coisa, se você declarar uma variável com um tipo number e depois tentar atribuir um valor boolean, o Typescript vai reclamar também. Isso acontece porque ele infere o tipo da variável com base no primeiro valor. Por exemplo:

let idade = 27;
idade = "vinte e sete"; // Type 'string' is not assignable to type 'number'.

E como tipar uma função que não retorna nada?

Bem simples, vamos utilizar void. Esse é um tipo utilizado quando uma função realiza somente um side effect, vulgo efeito colateral, tais como: emitir uma mensagem de log ou atualizar uma base de dados.

Veja o código a seguir:

const retornaNome = (nome: string): void => {
  console.log(nome);
};

Também existe um outro tipo semelhante, o never. Esse é indicado para quando uma função sempre dispara um erro ou fica em loop infinito e nunca retorna um valor.

function throwError(message: string): never {
  throw new Error(message);
}

Então quais são os tipos básicos em Typescript?

Essa é fácil, os tipos básicos em Typescript são:

Arrays e Tipos

E os arrays? Onde ficam? Como faz?

let hobbies: string[] = ["Cozinhar", "Treinar", "Jogar"];

Você também pode fazer com que ele confira a ordem dos itens, criando uma tupla:

let endereco: [string, number, string] = ["Rua das Flores", 123, "Bloco A"];

E a aplicação numa função:

function retornarArray(...args: number[]): number[] {
  return args;
}

const numeros = retornarArray(1, 2, 3, 4, 5);
console.log(numeros);

Objetos e Tipos

Ainda falta visitarmos como ficarão nossos objetos tipados.

let usuario: { nome: string; idade: number } = {
  nome: "João",
  idade: 31,
};

Conclusão

Até o momento passamos por diversos tópicos e, com isso você já adquiriu conhecimento básico de Typescript, é capaz de explicar o que é, quais são as vantagens, como executar localmente ou num playground e como tipar suas funções e variáveis.

Nos próximos passos vamos trabalhar com exemplos mais complexos, explorar como reutilizar as tipagens e o que mais for necessário para o nosso entendimento 😉

Referências