Typescript: Funções

#javascript #typescript #tutorial #beginners

Introdução

Antes de entender as tipagens nas funções, é importante entender o que o Typescript adiciona em cima do Javascript

Funções básicas em Javascript

Sem tipos, qualquer coisa é aceita. Os erros só aparecem em runtime (tempo de execução).

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

somar(1, 2);      // 3
somar("a", "b");  // "ab" — JavaScript não reclama
somar(1);         // NaN — JavaScript não reclama

A mesma função em TypeScript

Os erros aparecem antes de rodar — em tempo de desenvolvimento.

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

somar(1, 2);      // ✅ 3
somar("a", "b");  // ❌ erro em compilação
somar(1);         // ❌ erro — falta o segundo argumento

O que o Typescript adiciona às funções

Três coisas principais:

1. Tipo dos parâmetros

function saudar(nome: string) { ... }
//                    ^^^^^^

2. Tipo do retorno

function saudar(nome: string): string { ... }
//                             ^^^^^^

3. Inferência automática

function somar(a: number, b: number) {
  return a + b;
  // TypeScript infere que o retorno é number
  // sem precisar declarar explicitamente
}

Funções são valores — e também têm tipo

Em JavaScript, funções são cidadãos de primeira classe — você pode passá-las como argumento, guardá-las em variáveis, retorná-las de outras funções. TypeScript tipa isso também:

// variável que guarda uma função
const dobrar: (x: number) => number = (x) => x * 2;

// função que recebe outra função como argumento
function executar(fn: (x: number) => number, valor: number) {
  return fn(valor);
}

executar(dobrar, 5); // 10 ✅

Três formas de declarar uma função

// 1. Function declaration
function somar(a: number, b: number): number {
  return a + b;
}

// 2. Function expression
const somar = function(a: number, b: number): number {
  return a + b;
};

// 3. Arrow function
const somar = (a: number, b: number): number => a + b;

O retorno pode ser omitido

TypeScript consegue inferir o tipo de retorno na maioria dos casos:

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

// deixando o TypeScript inferir — equivalente
function somar(a: number, b: number) {
  return a + b; // TypeScript infere: number
}