Funções e Arrow Functions

O que são funções?

Função é um bloco de código que você escreve uma vez e usa quantas vezes quiser. Como uma receita: anota uma vez, faz o bolo sempre que precisar.

function saudação(nome: string): string {
  return `Olá, ${nome}!`;
}

console.log(saudação("Maria")); // → "Olá, Maria!"
console.log(saudação("João"));  // → "Olá, João!"

Parâmetros e retorno tipados

Em TypeScript, você declara os tipos dos parâmetros e do retorno:

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

function exibirMensagem(msg: string): void {
  console.log(msg);
  // void = não retorna nada
}

function estaAprovado(nota: number): boolean {
  return nota >= 7;
}

O tipo depois dos parênteses (: number, : void, : boolean) é o que a função devolve.

Exemplo: calculadora de desconto

function calcularDesconto(preco: number, percentual: number): number {
  const desconto: number = preco * (percentual / 100);
  return preco - desconto;
}

const precoOriginal: number = 120;
const precoFinal: number = calcularDesconto(precoOriginal, 15);
console.log(`De R$${precoOriginal} por R$${precoFinal}`); // → "De R$120 por R$102"

Arrow functions

Jeito mais curto de escrever funções. Perfeito para funções simples:

const dobrar = (n: number): number => n * 2;
const saudar = (nome: string): string => `Oi, ${nome}`;
const ehPar = (n: number): boolean => n % 2 === 0;

console.log(dobrar(7));       // → 14
console.log(saudar("Ana"));   // → "Oi, Ana"
console.log(ehPar(4));        // → true

const saudacaoCompleta = (nome: string, hora: number): string => {
  if (hora < 12) return `Bom dia, ${nome}!`;
  if (hora < 18) return `Boa tarde, ${nome}!`;
  return `Boa noite, ${nome}!`;
};

console.log(saudacaoCompleta("Ana", 9));  // → "Bom dia, Ana!"
console.log(saudacaoCompleta("Ana", 15)); // → "Boa tarde, Ana!"

Valores padrão

Parâmetros podem ter um valor "de reserva", usado quando nada é passado:

function cumprimentar(nome: string, saudação: string = "Olá"): string {
  return `${saudação}, ${nome}!`;
}

console.log(cumprimentar("Ana"));            // → "Olá, Ana!"
console.log(cumprimentar("Ana", "Bom dia")); // → "Bom dia, Ana!"

function formatarPreco(valor: number, moeda: string = "R$"): string {
  return `${moeda} ${valor.toFixed(2)}`;
}

console.log(formatarPreco(49.9));          // → "R$ 49.90"
console.log(formatarPreco(49.9, "US$"));   // → "US$ 49.90"

Escopo de variáveis

Variáveis criadas dentro de uma função só existem ali dentro. Pense como uma bolha:

const mensagem: string = "visível em todo lugar";

function exemplo(): void {
  const local: string = "visível só aqui dentro";
  console.log(mensagem); // → funciona (vem de fora)
  console.log(local);    // → funciona (é local)
}

exemplo();
// console.log(local); // → ERRO! local não existe aqui fora

De fora para dentro: OK. De dentro para fora: bloqueado.

Resumo

Conceito	Sintaxe	Quando usar
Função tradicional	function nome(p: tipo): tipo {}	Funções nomeadas
Arrow function	const f = (p: tipo): tipo => ...	Funções curtas
Valor padrão	function f(p: tipo = valor)	Parâmetros opcionais

Referências

• Funções - MDN Web Docs - guia completo sobre funções, arrow functions, parâmetros e escopo
• JavaScript Functions - W3Schools - tutorial interativo sobre declaração de funções e arrow functions
• Arrow Functions em TypeScript - Glaucia Lemos - vídeo sobre funções tradicionais e arrow functions com tipagem