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.

3.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.

3.2. 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.

3.3. 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!

3.4. 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.

3.5. 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.

---

Resumen del Módulo 3

Ahora conoces cómo definir funciones en TypeScript, cómo aplicar tipado a los parámetros y al valor de retorno, y cómo manejar características avanzadas como parámetros opcionales, sobrecarga de funciones y funciones de flecha. Estas herramientas te permitirán escribir funciones más seguras y flexibles en tus proyectos.