Como Adicionar Anotações de Tipo nos Parâmetros de uma Função em TypeScript

Uma função trivial para adicionar dois números pode ser escrita da seguinte maneira em JavaScript:

function somar(a, b) {
  return a + b;
}

Certos bugs como o seguinte podem às vezes acontecer:

let soma = somar("3", 5);
console.log(soma);

O script acima imprime o seguinte:

35

Observe que 3 + 5 deveria ser 8, mas devido ao primeiro argumento não ser o número 3, mas uma string que contém o caractere "3", obtemos um resultado incorreto. Isto porquê no JavaScript uma string + number irá causar uma operação de concatenação, cujo resultado no exemplo é "35".

Questões como essas podem ser detectadas facilmente no TypeScript na hora de compilação, sem termos que esperar até a hora de execução para verificar.

Vamos adicionar uma anotação de tipo para cada parâmetro da função em exemplo:

function somar(a: number, b: number) {
  return a + b;
}

Para definir o tipo do parâmetro, escreve-se dois pontos seguidos do tipo. No exemplo acima, o requiremento é que cada parâmetro seja um número, number.

Agora, ao compilar a função acima junto a chamada de somar abaixo, o compilador irá indicar um erro.

let soma = somar("3", 5);
console.log(soma);

Argument of type '"3"' is not assignable to parameter of type 'number'.

Para consertar o problema, basta passar um número no primeiro argumento, sem aspas:

let soma = somar(3, 5);

Saída da Execução:

8

Um dos grandes benefícios do TypeScript é poder detectar códigos problemáticos cedo, na etapa de compilação. Isso previne ter que rodar o script e testar na hora de execução.

É importante ressaltar que se escrevermos código diretamente em JavaScript, sem o passo da compilação do TypeScript, há uma chance do erro não ser detectado. Isso porque ainda que o script execute sem nenhum erro explícito, o JavaScript normal não tem cheque de tipos e, do seu ponto de vista, pensa que tudo está correto.

Para aprender mais sobre TypeScript, assista às aulas do NBK Mundo Tech:

https://www.youtube.com/watch?v=czp3QV55v1k&list=PLUbb2i4BuuzBcH1iS242xjztUwMI4erNb

Nos vemos lá!