¿Cómo funcionan las funciones con tipos en TypeScript?

En TypeScript, una función con tipos declara explícitamente qué tipo de datos recibe cada parámetro y qué tipo de dato regresa.

Esto elimina errores silenciosos. El compilador avisa antes de que el programa corra.

Sintaxis básica de una función tipada

La estructura general es la siguiente:

function nombreFuncion(parametro: Tipo): TipoDeRetorno {
  // cuerpo de la función
}

Cada parámetro lleva dos puntos (:) seguidos de su tipo. Al final de los paréntesis va otro : con el tipo de retorno.

Ejemplo mínimo:

function saludar(nombre: string): string {
  return "Hola, " + nombre;
}

El parámetro nombre debe ser string. La función también devuelve un string. Si intentas pasar un número, TypeScript lanza un error.

Ejemplos progresivos

Ejemplo 1 — Cálculo de precio con IVA

En México el IVA general es del 16 %. Esta función recibe el precio base y devuelve el total:

function calcularPrecioConIVA(precioBase: number): number {
  return precioBase * 1.16;
}

const total = calcularPrecioConIVA(500);
console.log("Total con IVA: $" + total); // Total con IVA: $580

Si alguien llama calcularPrecioConIVA("quinientos"), TypeScript marca error de inmediato.

Ejemplo 2 — Función con múltiples parámetros

Imagina un sistema de nómina para una empresa como Bimbo. Necesitas calcular el salario semanal de un repartidor:

function calcularSalarioSemanal(
  salarioDiario: number,
  diasTrabajados: number
): number {
  return salarioDiario * diasTrabajados;
}

const pago = calcularSalarioSemanal(350, 6);
console.log("Pago semanal: $" + pago); // Pago semanal: $2,100

Ambos parámetros son number. El tipo de retorno también es number. No hay ambigüedad.

Ejemplo 3 — Función que devuelve un objeto

En Liverpool, cada producto tiene nombre y precio. Esta función crea un resumen de compra:

interface ResumenCompra {
  producto: string;
  subtotal: number;
  totalConIVA: number;
}

function generarResumen(producto: string, precio: number): ResumenCompra {
  return {
    producto: producto,
    subtotal: precio,
    totalConIVA: precio * 1.16,
  };
}

const resumen = generarResumen("Pantalla 55 pulgadas", 12500);
console.log(resumen.producto);     // Pantalla 55 pulgadas
console.log("$" + resumen.totalConIVA); // $14,500

El tipo de retorno ResumenCompra le dice al compilador exactamente qué propiedades esperar.

Parámetros opcionales

Un parámetro opcional se marca con ? después del nombre. No es obligatorio pasarlo al llamar la función.

function generarEtiqueta(nombre: string, descuento?: number): string {
  if (descuento) {
    return nombre + " — Descuento: " + descuento + "%";
  }
  return nombre + " — Precio regular";
}

console.log(generarEtiqueta("Leche Lala"));         // Leche Lala — Precio regular
console.log(generarEtiqueta("Leche Lala", 15));    // Leche Lala — Descuento: 15%

Regla importante: los parámetros opcionales siempre van al final. No puedes poner un parámetro obligatorio después de uno opcional.

Parámetros con valor por defecto

Otra opción es asignar un valor por defecto directamente:

function calcularEnvio(peso: number, costoBase: number = 99): number {
  return costoBase + peso * 10;
}

console.log(calcularEnvio(2));     // 119  (usa costoBase = 99)
console.log(calcularEnvio(2, 50)); // 70   (usa costoBase = 50)

En Mercado Libre, por ejemplo, el costo base de envío puede variar por región. Con un valor por defecto, el parámetro es opcional pero siempre tiene un valor seguro.

Funciones flecha con tipos

Las funciones flecha (arrow functions) tienen una sintaxis más corta. Se tipan de la misma forma.

const nombreFuncion = (parametro: Tipo): TipoDeRetorno => {
  // cuerpo
};

Ejemplo — Filtrar productos por precio

En una tienda en línea como FEMSA Digital, necesitas filtrar artículos por precio máximo:

const filtrarPorPrecio = (precios: number[], maximo: number): number[] => {
  return precios.filter((p) => p <= maximo);
};

const precios = [150, 320, 800, 45, 1200];
const baratos = filtrarPorPrecio(precios, 400);
console.log(baratos); // [150, 320, 45]

El tipo number[] indica un arreglo de números. Tanto el parámetro como el retorno están claramente tipados.

Función flecha de una sola línea

Cuando el cuerpo es una sola expresión, puedes omitir las llaves y el return:

const aplicarDescuento = (precio: number, porcentaje: number): number =>
  precio - precio * (porcentaje / 100);

console.log(aplicarDescuento(1000, 20)); // 800

Esta forma es común en código profesional. Es más corta pero exactamente igual en comportamiento.

El tipo void

Cuando una función no devuelve nada, su tipo de retorno es void.

function registrarPedido(idPedido: string): void {
  console.log("Pedido registrado: " + idPedido);
}

No uses void cuando la función sí devuelve un valor. Si lo haces, TypeScript no te dejará usar ese valor en otra parte del código.

Tabla de referencia rápida

Errores comunes

Error 1 — Olvidar el tipo de retorno

// ❌ Sin tipo de retorno declarado
function obtenerNombre() {
  return 42; // TypeScript infiere number, pero puede sorprenderte
}

// ✅ Con tipo de retorno explícito
function obtenerNombre(): string {
  return "FEMSA";
}

Declarar el tipo de retorno hace el código más fácil de leer y evita que una refactorización cambie el tipo sin aviso.

Error 2 — Poner un parámetro opcional antes de uno obligatorio

// ❌ Error de compilación
function crearCupon(descuento?: number, codigo: string): string {
  return codigo + "-" + descuento;
}

// ✅ Correcto: el opcional va al final
function crearCupon(codigo: string, descuento?: number): string {
  return descuento ? codigo + "-" + descuento : codigo;
}

TypeScript no puede saber qué argumento es cuál si el opcional está en medio.

Error 3 — Mezclar tipos incompatibles en el retorno

// ❌ El tipo declarado es number, pero a veces devuelve string
function calcularTotal(precio: number): number {
  if (precio < 0) {
    return "Precio inválido"; // Error: Type 'string' is not assignable to type 'number'
  }
  return precio * 1.16;
}

// ✅ Usa un tipo de unión o maneja el error correctamente
function calcularTotal(precio: number): number {
  if (precio < 0) {
    throw new Error("Precio inválido");
  }
  return precio * 1.16;
}

Si necesitas devolver más de un tipo, declara number | string. Pero en general es mejor lanzar un error o devolver un solo tipo.

Error 4 — Ignorar el undefined en parámetros opcionales

Cuando un parámetro es opcional, su valor puede ser undefined. No accedas a sus propiedades sin verificarlo primero:

// ❌ Puede fallar en tiempo de ejecución
function mostrarDescuento(descuento?: number): string {
  return "Ahorro: $" + descuento.toFixed(2); // descuento puede ser undefined
}

// ✅ Verifica antes de usar
function mostrarDescuento(descuento?: number): string {
  if (descuento === undefined) return "Sin descuento";
  return "Ahorro: $" + descuento.toFixed(2);
}

Puntos clave