Funciones

En este módulo aprenderás cómo declarar y utilizar funciones en TypeScript con tipos, lo que te ayudará a prevenir errores y hacer tu código más claro. También exploraremos características avanzadas como parámetros opcionales, sobrecarga de funciones y funciones de flecha.

1. Declaración y Tipado de funciones #

En TypeScript, puedes especificar el tipo de los parámetros de una función y el tipo de retorno. Esto permite a TypeScript verificar que los argumentos y el valor de retorno de la función son correctos.

Ejemplo de declaración de función:

 
1function sumar(a: number, b: number): number {
2  return a + b;
3}
4
5console.log(sumar(2, 3));  // 5
Salida de consola
5

Aquí, la función sumar recibe dos parámetros de tipo number y devuelve un valor también de tipo number. Si intentas llamar a la función con tipos incorrectos, TypeScript generará un error.

Parámetros opcionales y con valores por defecto #

TypeScript te permite definir parámetros opcionales en las funciones usando el operador ?. También puedes asignar valores por defecto a los parámetros, lo que se utiliza cuando el argumento no se proporciona.

• Parámetros opcionales: Se indican con ? después del nombre del parámetro.

  Ejemplo:

   
  1function saludar(nombre: string, saludo?: string): string {
  2  if (saludo) {
  3    return `${saludo}, ${nombre}!`;
  4  }
  5  return `Hola, ${nombre}!`;
  6}
  7
  8console.log(saludar("Juan"));  // "Hola, Juan!"
  9console.log(saludar("Juan", "Buenas tardes"));  // "Buenas tardes, Juan!"
  Salida de consola
  Hola, Juan! 
  Buenas tardes, Juan!

  Aquí, el parámetro saludo es opcional. Si no se proporciona, la función usa un valor por defecto en su lógica.

• Parámetros con valor por defecto: Se pueden asignar directamente en la definición de la función.

  Ejemplo:

   
  1function multiplicar(a: number, b: number = 2): number {
  2  return a * b;
  3}
  4
  5console.log(multiplicar(5));  // 10 (usa el valor por defecto de `b`)
  6console.log(multiplicar(5, 3));  // 15 (se sobrescribe el valor por defecto)
  Salida de consola
  10
  15

  En este caso, si no se proporciona el segundo argumento, se utilizará el valor por defecto 2.

Tipos de retorno #

Puedes especificar el tipo de valor que una función debe retornar. Esto asegura que la función retorne un valor del tipo correcto.

Ejemplo:

 
1function esPar(numero: number): boolean {
2  return numero % 2 === 0;
3}
4
5console.log(esPar(4));  // true
6console.log(esPar(7));  // false
Salida de consola
true
false

Aquí, la función esPar debe retornar un valor de tipo boolean. Si intentas retornar otro tipo, TypeScript te mostrará un error.

Si una función no retorna nada, puedes usar el tipo void:

 
1function mostrarMensaje(mensaje: string): void {
2  console.log(mensaje);
3}
4
5mostrarMensaje("¡Hola!");  // "¡Hola!"
Salida de consola
¡Hola!

Sobrecarga de funciones #

TypeScript soporta la sobrecarga de funciones, lo que significa que puedes definir múltiples firmas para una función y decidir su comportamiento dependiendo de los tipos de los argumentos.

Ejemplo:

 
1function combinar(a: number, b: number): number;
2function combinar(a: string, b: string): string;
3function combinar(a: any, b: any): any {
4  if (typeof a === "number" && typeof b === "number") {
5    return a + b;
6  }
7  if (typeof a === "string" && typeof b === "string") {
8    return a + b;
9  }
10  throw new Error("Los parámetros deben ser del mismo tipo");
11}
12
13console.log(combinar(10, 20));  // 30
14console.log(combinar("Hola", " Mundo"));  // "Hola Mundo"
Salida de consola
30
Hola Mundo

En este ejemplo, la función combinar tiene dos versiones: una que acepta números y otra que acepta strings. Según el tipo de los argumentos, la función decide cómo actuar. Si intentas mezclar tipos, se arroja un error.

Funciones anónimas y funciones de flecha #

• Funciones anónimas: Son funciones que no tienen nombre. Se suelen asignar a variables o pasar como parámetros.

  Ejemplo:

   
  1const saludo = function(nombre: string): string {
  2  return `Hola, ${nombre}`;
  3};
  4
  5console.log(saludo("Carlos"));  // "Hola, Carlos"
  Salida de consola
  Hola, Carlos

  En este caso, la función no tiene nombre, pero la hemos asignado a la variable saludo.

• Funciones de flecha: Son una forma concisa de escribir funciones anónimas. Las funciones de flecha no tienen su propio valor de this, lo que las hace útiles en ciertos contextos como eventos o callbacks.

  Ejemplo:

   
  1const multiplicar = (a: number, b: number): number => a * b;
  2
  3console.log(multiplicar(3, 4));  // 12
  Salida de consola
  12

  Las funciones de flecha son más cortas y tienen un comportamiento de this diferente a las funciones normales, lo cual puede ser útil en algunos casos (por ejemplo, cuando quieres acceder al valor de this de una clase).

Uso de this en funciones de flecha:

 
1class Persona {
2  nombre: string;
3
4  constructor(nombre: string) {
5    this.nombre = nombre;
6  }
7
8  saludar() {
9    setTimeout(() => {
10      console.log(`Hola, soy ${this.nombre}`);  // Accede correctamente a `this`
11    }, 1000);
12  }
13}
14
15const persona = new Persona("Ana");
16persona.saludar();  // "Hola, soy Ana"
Salida de consola
Hola, soy Ana

Si hubiéramos usado una función normal en setTimeout, el valor de this sería diferente, pero la función de flecha mantiene el contexto de this de la clase.