Funciones con tipado básico

Anotaciones de tipo en parámetros y retorno

El tipado de funciones en TypeScript permite declarar que tipos de datos acepta cada parámetro y que tipo devuelve la función. El compilador utiliza estas anotaciones para verificar que las llamadas respeten el contrato definido, detectando errores antes de ejecutar el código.

La sintaxis consiste en añadir : tipo después de cada parámetro y después de los paréntesis para el tipo de retorno:

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

const resultado = sumar(10, 20)
console.log(resultado) // 30

Cuando una función no devuelve ningun valor, se utiliza el tipo void como retorno:

function mostrarMensaje(mensaje: string): void {
  console.log(mensaje)
}

mostrarMensaje("Hola desde TypeScript")

El tipo void indica que la función no produce un valor de retorno. A diferencia de undefined, void expresa la intención de que el valor devuelto no debe usarse.

Tipado con múltiples parámetros

Cada parámetro requiere su propia anotación de tipo. TypeScript verifica que el número y tipo de argumentos coincidan con la declaración:

function crearEtiqueta(nombre: string, edad: number, activo: boolean): string {
  const estado = activo ? "activo" : "inactivo"
  return `${nombre} (${edad}) - ${estado}`
}

const etiqueta = crearEtiqueta("Ana", 30, true)
console.log(etiqueta) // "Ana (30) - activo"

TypeScript detecta errores cuando los tipos no coinciden:

function calcularImpuesto(precio: number, tasa: number): number {
  return precio * tasa
}

// Error: Argument of type 'string' is not assignable to parameter of type 'number'
// calcularImpuesto("100", 0.21)

// Error: Expected 2 arguments, but got 1
// calcularImpuesto(100)

const impuesto = calcularImpuesto(100, 0.21)
console.log(impuesto) // 21

Inferencia del tipo de retorno

TypeScript puede inferir automáticamente el tipo de retorno a partir del valor que devuelve la función. Sin embargo, declarar el tipo de retorno de forma explícita mejora la legibilidad y evita cambios accidentales:

// TypeScript infiere que retorna number
function multiplicar(a: number, b: number) {
  return a * b
}

// Declaración explícita del tipo de retorno
function dividir(a: number, b: number): number {
  return a / b
}

Funciones que retornan objetos

Se puede especificar un tipo de objeto en linea como retorno de la función:

function crearUsuario(nombre: string, email: string): { nombre: string; email: string; activo: boolean } {
  return {
    nombre,
    email,
    activo: true
  }
}

const usuario = crearUsuario("Carlos", "carlos@mail.com")
console.log(usuario.nombre) // "Carlos"
console.log(usuario.activo) // true

Parámetros opcionales y valores por defecto

No todas las funciones necesitan recibir todos sus parámetros en cada llamada. TypeScript ofrece parámetros opcionales y parámetros con valores por defecto para crear funciones flexibles sin perder la seguridad de tipos.

Parámetros opcionales con ?

Un parámetro opcional se marca con el signo ? después del nombre. Dentro de la función, su tipo será la union del tipo declarado con undefined:

function saludar(nombre: string, titulo?: string): string {
  if (titulo) {
    return `Hola, ${titulo} ${nombre}`
  }
  return `Hola, ${nombre}`
}

console.log(saludar("Maria"))           // "Hola, Maria"
console.log(saludar("Maria", "Dra."))   // "Hola, Dra. Maria"

Los parámetros opcionales deben ir siempre después de los parámetros obligatorios. TypeScript genera un error si un parámetro opcional precede a uno obligatorio.

function crearPerfil(nombre: string, edad: number, bio?: string): string {
  let perfil = `${nombre}, ${edad} anios`
  if (bio) {
    perfil += ` - ${bio}`
  }
  return perfil
}

console.log(crearPerfil("Luis", 25))
console.log(crearPerfil("Luis", 25, "Desarrollador"))

Parámetros con valores por defecto

Los valores por defecto se asignan con = después del parámetro. TypeScript infiere el tipo a partir del valor predeterminado:

function configurarServidor(host: string = "localhost", puerto: number = 3000): string {
  return `Servidor en ${host}:${puerto}`
}

console.log(configurarServidor())                  // "Servidor en localhost:3000"
console.log(configurarServidor("192.168.1.1"))     // "Servidor en 192.168.1.1:3000"
console.log(configurarServidor("0.0.0.0", 8080))   // "Servidor en 0.0.0.0:8080"

Los parámetros con valores por defecto no necesitan anotación de tipo explícita cuando el valor por defecto es suficiente para inferirlo:

function repetirTexto(texto: string, veces = 1): string {
  let resultado = ""
  for (let i = 0; i < veces; i++) {
    resultado += texto
  }
  return resultado
}

console.log(repetirTexto("Hola "))      // "Hola "
console.log(repetirTexto("Hola ", 3))   // "Hola Hola Hola "

Combinación de opcionales y valores por defecto

Ambas técnicas pueden combinarse en la misma función. Los parámetros con valor por defecto no necesitan el operador ? porque ya son implícitamente opcionales:

function enviarNotificacion(
  destinatario: string,
  mensaje: string,
  urgente?: boolean,
  canal: string = "email"
): string {
  let notificacion = `[${canal.toUpperCase()}] Para: ${destinatario} - ${mensaje}`
  if (urgente) {
    notificacion = "[URGENTE] " + notificacion
  }
  return notificacion
}

console.log(enviarNotificacion("Ana", "Reunion mañana"))
console.log(enviarNotificacion("Ana", "Incidencia crítica", true, "sms"))

Validación de parámetros opcionales con nullish coalescing

El operador ?? es útil para proporcionar valores alternativos cuando un parámetro opcional es undefined:

function procesarTexto(texto: string, longitud?: number): string {
  const longitudFinal = longitud ?? 50
  if (texto.length > longitudFinal) {
    return texto.substring(0, longitudFinal) + "..."
  }
  return texto
}

console.log(procesarTexto("Texto corto"))
console.log(procesarTexto("Texto que podría ser muy largo y necesitar truncado", 20))

Rest parameters y funciones arrow tipadas

Rest parameters

Los rest parameters permiten que una función acepte un número variable de argumentos del mismo tipo. Se declaran con la sintaxis ...nombre: tipo[] y siempre deben ser el último parámetro:

function sumarTodos(...números: number[]): number {
  return números.reduce((total, n) => total + n, 0)
}

console.log(sumarTodos(1, 2, 3))       // 6
console.log(sumarTodos(10, 20, 30, 40)) // 100
console.log(sumarTodos())               // 0

Los rest parameters se combinan con parámetros regulares colocandolos al final:

function registrarEvento(nivel: string, ...mensajes: string[]): void {
  const timestamp = new Date().toISOString()
  const contenido = mensajes.join(" ")
  console.log(`[${timestamp}] ${nivel.toUpperCase()}: ${contenido}`)
}

registrarEvento("info", "Servidor", "iniciado", "correctamente")
registrarEvento("error", "Conexion", "rechazada")

Es importante distinguir un rest parameter de un parámetro de tipo array. El rest parameter recibe argumentos separados, mientras que un parámetro array recibe un único array:

// Rest parameter: argumentos individuales
function maxRest(...valores: number[]): number {
  return Math.max(...valores)
}

// Parámetro array: un solo argumento de tipo array
function maxArray(valores: number[]): number {
  return Math.max(...valores)
}

console.log(maxRest(5, 10, 3))        // 10
console.log(maxArray([5, 10, 3]))     // 10

Funciones arrow con tipado

Las funciones arrow se tipan con la misma sintaxis que las funciones tradicionales:

const calcularArea = (base: number, altura: number): number => {
  return base * altura
}

const esPar = (n: number): boolean => n % 2 === 0

const formatearMoneda = (cantidad: number, moneda: string = "EUR"): string => {
  return `${cantidad.toFixed(2)} ${moneda}`
}

console.log(calcularArea(5, 10))         // 50
console.log(esPar(4))                    // true
console.log(formatearMoneda(19.99))      // "19.99 EUR"
console.log(formatearMoneda(25, "USD"))  // "25.00 USD"

Las funciones arrow también soportan parámetros opcionales y rest parameters:

const unirPalabras = (separador: string, ...palabras: string[]): string => {
  return palabras.join(separador)
}

console.log(unirPalabras(", ", "TypeScript", "JavaScript", "Python"))
// "TypeScript, JavaScript, Python"

const saludarOpcional = (nombre: string, saludo?: string): string => {
  return `${saludo ?? "Hola"}, ${nombre}`
}

console.log(saludarOpcional("Elena"))           // "Hola, Elena"
console.log(saludarOpcional("Elena", "Buenos dias"))  // "Buenos dias, Elena"

Expresiones de tipo función

Las expresiones de tipo función permiten definir la firma de una función como un tipo independiente. Esto es útil para tipar callbacks, parámetros de orden superior y variables que almacenan funciones.

La sintaxis utiliza la notación de flecha: (parámetros) => tipoRetorno:

type Operación = (a: number, b: number) => number

const sumar: Operación = (a, b) => a + b
const restar: Operación = (a, b) => a - b
const multiplicar: Operación = (a, b) => a * b

console.log(sumar(10, 5))       // 15
console.log(restar(10, 5))      // 5
console.log(multiplicar(10, 5)) // 50

Cuando se asigna una función a una variable con un tipo de función definido, TypeScript aplica tipado contextual: los parámetros de la función heredan los tipos del alias, sin necesidad de anotarlos de nuevo.

Funciones como parámetros

Los tipos de función son especialmente útiles para definir callbacks:

type Filtro = (valor: number) => boolean

function filtrarNumeros(números: number[], criterio: Filtro): number[] {
  return números.filter(criterio)
}

const esMayorQueDiez: Filtro = (n) => n > 10
const esPar: Filtro = (n) => n % 2 === 0

const datos = [5, 12, 8, 20, 3, 15]

console.log(filtrarNumeros(datos, esMayorQueDiez)) // [12, 20, 15]
console.log(filtrarNumeros(datos, esPar))          // [12, 8, 20]

Funciones que retornan funciones

Las expresiones de tipo función también describen funciones que devuelven otras funciones:

type Comparador = (a: string, b: string) => number
type CreadorComparador = (ascendente: boolean) => Comparador

const crearComparador: CreadorComparador = (ascendente) => {
  return (a, b) => {
    const resultado = a.localeCompare(b)
    return ascendente ? resultado : -resultado
  }
}

const nombres = ["Carlos", "Ana", "Elena", "Bruno"]

nombres.sort(crearComparador(true))
console.log(nombres) // ["Ana", "Bruno", "Carlos", "Elena"]

nombres.sort(crearComparador(false))
console.log(nombres) // ["Elena", "Carlos", "Bruno", "Ana"]

Tipo void en expresiones de tipo función

Cuando se define un tipo de función con retorno void, las implementaciones pueden devolver cualquier valor, pero este será ignorado. Este comportamiento permite que funciones como Array.prototype.forEach acepten callbacks que devuelven valores sin generar errores:

type Callback = (mensaje: string) => void

const registrar: Callback = (msg) => {
  console.log(msg)
}

const registrarConRetorno: Callback = (msg) => {
  console.log(msg)
  return msg.length // No genera error, pero el retorno se ignora
}

function ejecutarCallbacks(mensaje: string, ...callbacks: Callback[]): void {
  for (const cb of callbacks) {
    cb(mensaje)
  }
}

ejecutarCallbacks("Proceso completado", registrar, registrarConRetorno)

Tipos de función inline vs alias

Los tipos de función pueden declararse directamente en la firma del parámetro (inline) o como alias con type. Para funciones reutilizadas en múltiples lugares, los alias mejoran la legibilidad:

// Inline: útil para funciones usadas una sola vez
function procesarDatos(datos: string[], transformar: (item: string) => string): string[] {
  return datos.map(transformar)
}

// Alias: mejor cuando el tipo se reutiliza
type Transformador = (item: string) => string

function procesarLista(datos: string[], transformar: Transformador): string[] {
  return datos.map(transformar)
}

function aplicarDoble(datos: string[], primera: Transformador, segunda: Transformador): string[] {
  return datos.map((item) => segunda(primera(item)))
}

const mayusculas: Transformador = (s) => s.toUpperCase()
const recortar: Transformador = (s) => s.trim()

const resultado = aplicarDoble(["  hola  ", "  mundo  "], recortar, mayusculas)
console.log(resultado) // ["HOLA", "MUNDO"]