Funciones y Parámetros en TypeScript: Opcionales, Múltiples y por Defecto

Resumen

Los parámetros en funciones de TypeScript ofrecen una flexibilidad extraordinaria que permite optimizar nuestro código y hacerlo más eficiente. Al dominar los diferentes tipos de parámetros, podemos crear métodos versátiles que se adapten a múltiples escenarios sin necesidad de duplicar código. Esta capacidad no solo mejora la legibilidad sino que también reduce significativamente el tiempo de desarrollo.

¿Cómo hacer que nuestras funciones sean más flexibles con parámetros especiales?

Cuando trabajamos con TypeScript, podemos hacer que nuestras funciones sean mucho más adaptables utilizando diferentes tipos de parámetros. Esto nos permite escribir menos código que realice más tareas, lo que resulta en aplicaciones más mantenibles y eficientes.

Parámetros opcionales: ¿Cómo implementarlos correctamente?

Los parámetros opcionales nos permiten definir argumentos que pueden o no ser proporcionados al llamar a una función. Para indicar que un parámetro es opcional, simplemente agregamos un signo de interrogación (?) después del nombre del parámetro.

Veamos un ejemplo práctico:

function saludar(nombre: string, saludo?: string): string {
  if (saludo) {
    return `${saludo}, ${nombre}!`;
  } else {
    return `Hola, ${nombre}`;
  }
}

console.log(saludar("Amin"));
console.log(saludar("Amin", "Buenos días"));

Al ejecutar este código, obtendremos:

"Hola, Amin" (cuando no proporcionamos el saludo)
"Buenos días, Amin!" (cuando sí proporcionamos el saludo)

La ventaja principal de los parámetros opcionales es que nos evitan tener que crear múltiples versiones de la misma función para manejar diferentes casos. Una sola función puede adaptarse a distintas situaciones dependiendo de los argumentos que reciba.

Parámetros múltiples: ¿Cómo manejar un número variable de argumentos?

Los parámetros múltiples (o rest parameters) nos permiten pasar un número indefinido de argumentos a una función. Se indican con tres puntos (...) antes del nombre del parámetro.

function sumarTodos(...numeros: number[]): number {
  return numeros.reduce((acumulador, valor) => acumulador + valor, 0);
}

console.log(`El resultado de sumar todos es ${sumarTodos(1, 2, 3, 4, 5)}`);

Este código sumará todos los números proporcionados (1+2+3+4+5) y mostrará "El resultado de sumar todos es 15".

El método reduce utilizado en este ejemplo es una forma elegante de procesar todos los elementos de un array sin necesidad de utilizar un ciclo foreach. Este método va acumulando los valores a medida que recorre el array.

Los parámetros múltiples pueden resultar complicados al principio, pero con práctica se convierten en una herramienta muy poderosa para crear funciones flexibles que puedan manejar diferentes cantidades de datos.

Valores por defecto: ¿Cómo establecer valores predeterminados?

Los valores por defecto nos permiten asignar un valor predeterminado a un parámetro en caso de que no se proporcione ninguno al llamar a la función.

function despedir(nombre: string, despedida: string = "Adiós"): string {
  return `${despedida}, ${nombre}`;
}

console.log(despedir("Amin"));
console.log(despedir("Amin", "Hasta luego"));

Al ejecutar este código, obtendremos:

"Adiós, Amin" (utilizando el valor por defecto)
"Hasta luego, Amin" (sobrescribiendo el valor por defecto)

La diferencia clave entre los parámetros opcionales y los valores por defecto es que los primeros pueden no estar presentes, mientras que los segundos siempre tendrán un valor, ya sea el proporcionado o el predeterminado.

¿Por qué optimizar nuestras funciones con estos parámetros?

La implementación de estos tipos de parámetros en nuestras funciones nos permite:

Simplificar nuestro código: en lugar de escribir múltiples funciones para diferentes casos, podemos crear una sola función más versátil.
Optimizar el tiempo de desarrollo: menos código significa menos tiempo escribiendo y depurando.
Mejorar la legibilidad: un código más conciso es generalmente más fácil de entender y mantener.

Dominar estos conceptos en TypeScript nos ayuda a escribir código más elegante y eficiente, aprovechando al máximo las capacidades del lenguaje para crear aplicaciones robustas y mantenibles.

Los parámetros especiales en TypeScript son herramientas poderosas que todo desarrollador debería conocer y utilizar. ¿Has implementado alguno de estos tipos de parámetros en tus proyectos? ¿Cuál te ha resultado más útil? Comparte tu experiencia en los comentarios.

Brayan Silvera

student•

El titulo dice sobre carga de funciones y en ningún momento del video se toca este tema

Diego Alonso Ojeda Medina

student•

📐 Sobrecarga de funciones en TypeScript

La sobrecarga de funciones nos permite declarar múltiples versiones de una misma función con diferentes firmas de entrada, pero una sola implementación.

🔹 Sintaxis:

Primero declaramos las firmas sobrecargadas.
Luego implementamos la función con lógica para cubrir todos los casos.

📌 Ejemplo clásico:

// Firmas de sobrecarga
function combinar(a: string, b: string): string;
function combinar(a: number, b: number): number;

// Implementación única
function combinar(a: string | number, b: string | number): string | number {
  if (typeof a === "string" && typeof b === "string") {
    return a + b; // Concatenación
  }

  if (typeof a === "number" && typeof b === "number") {
    return a + b; // Suma numérica
  }

  throw new Error("Tipos incompatibles");
}

console.log(combinar("Hola", " Mundo")); // "Hola Mundo"
console.log(combinar(10, 20));           // 30
```// Firmas de sobrecarga
function combinar(a: string, b: string): string;
function combinar(a: number, b: number): number;

// Implementación única
function combinar(a: string | number, b: string | number): string | number {
&#x20; if (typeof a === "string" && typeof b === "string") {
&#x20;   return a + b; // Concatenación
&#x20; }

&#x20; if (typeof a === "number" && typeof b === "number") {
&#x20;   return a + b; // Suma numérica
&#x20; }

&#x20; throw new Error("Tipos incompatibles");
}

console.log(combinar("Hola", " Mundo")); // "Hola Mundo"
console.log(combinar(10, 20));           // 30


⚠️ TypeScript **no permite múltiples implementaciones**, solo múltiples **firmas**.

Rolando Osorio

student•

Para la sobrecarga de funciones les dejo un ejemplo practico

type User = { id: number; name: string };

// Base de datos simulada
const users: User[] = [
  { id: 1, name: "Osorio" },
  { id: 2, name: "Daniela" }
];

// Firmas de sobrecarga
function findUser(query: number): User | undefined;
function findUser(query: string): User | undefined;

// Implementación
function findUser(query: number | string): User | undefined {
  if (typeof query === "number") {
    return users.find(user => user.id === query);
  } else {
    return users.find(user => user.name === query);
  }
}

// Uso
console.log(findUser(1)); // { id: 1, name: "Osorio" }
console.log(findUser("Daniela")); // { id: 2, name: "Daniela" }

Wilder Cahuaya Quispe

student•

Cual es la diferencia entre Funcion y Metodo?

Carlos Esteban León Pinilla

student•

A nivel práctico es lo mismo, pero técnicamente la diferencia es que un método pertenece a una clase, la función no.

José Luis Reyes

student•

Un tipo de dato primitivo es una categoría de datos básicos que no se pueden descomponer en otros tipos más simples. En programación, los tipos primitivos suelen incluir números (enteros y flotantes), cadenas de texto (strings), booleanos (true/false) y, a veces, caracteres. En TypeScript, estos tipos son fundamentales para la construcción de variables y funciones, permitiendo un manejo eficiente de los datos en las aplicaciones. Estos tipos son la base sobre la cual se construyen tipos más complejos, como objetos y arrays.

Sofia Libertad Montoya Herrera

student•

Mi aporte con un ejemplo de la función con parámetros múltiples, entendiendo que el array también puede ser de varios tipos:

const informacionPersona = (...elementos: (string | number | boolean)[]) : void => {
    elementos.forEach((elemento) => console.log(typeof elemento, elemento));
}

informacionPersona('Sofia', 23, 'Colombia', true);

Sebastian Garcia

student•

El parámetro rest (...args) debe ir al final y solo puede haber uno:tsCopiarEditarfunction listarFrutas(principal: string, ...otras: string[]) {} ❌ Esto no está permitido:tsCopiarEditarfunction listarFrutas(...otras: string[], principal: string) {} // ❌ error function listarFrutas(...a: string[], ...b: string[]) {} // ❌ error

Rolando Osorio

student•

TypeScript es hermoso cuando lo entiendes, ejemplo:

enum NumerosElegir {
    UNO = 1,
    DOS = 2,
    TRES = 3,
    CUATRO = 4,
    CINCO = 5,
}

type Multiplicador = {
    num1: number;
    num2: NumerosElegir;
}

function sumarTodo(...nums:number[]):number {
    return nums.reduce((a, b) => a + b, 0);
}

function Multiplicar(numero:Multiplicador):number {
    return numero.num1 * numero.num2;
}

function decirNumero(resultado:number, fraseInicial: string = "El resultado es:", fraseFinal?: string):void {
    console.log(`${fraseInicial} ${resultado} ${fraseFinal ? fraseFinal : ""}`);
}

const sumaTotal = sumarTodo(1,2,3,4,5,6,7,8,9,10,20)
const multiTotal = Multiplicar({num1: sumaTotal, num2: NumerosElegir.CUATRO})
const decirSuma = decirNumero(sumaTotal, "El resultado de la suma es:", "y eso es todo");
const decirMulti = decirNumero(multiTotal);

Alfredo Olmedo

student•

En TypeScript, la sobrecarga de funciones permite definir múltiples firmas para una función, pero solo una implementación real. Es útil para crear funciones que pueden recibir diferentes tipos o combinaciones de parámetros y devolver distintos resultados según el caso.

Ejemplo de sobrecarga de funciones en TypeScript

Explicación

// Firmas de la función

function saludar(nombre: string): string;

function saludar(nombres: string[]): string;

// Implementación de la función

function saludar(param: string | string[]): string {

if (typeof param === "string") {

return `¡Hola, ${param}!`;

} else {

return `¡Hola a todos: ${param.join(", ")}!`;

}

// Uso de la función

console.log(saludar("Juan")); // ¡Hola, Juan!

console.log(saludar(["Ana", "Luis"])); // ¡Hola a todos: Ana, Luis!

Es importante recordar que la implementación real de la función debe coincidir con las firmas declaradas, y que la lógica dentro de la función debe manejar correctamente los diferentes tipos de entrada.

Funciones y Parámetros en TypeScript: Opcionales, Múltiples y por Defecto

Fundamentos de TypeScript

TypeScript: Auditoría de Tipos para Aplicaciones JavaScript

Instalación y Configuración de TypeScript en Visual Studio Code

"Introducción a TypeScript: Variables y Compilación Básica"

Tipos de Variables Avanzadas en TypeScript: any, unknown, never, void

Colecciones de Datos en TypeScript: Arreglos, Tuplas y Enumeradores

Funciones e Interfaces

Creación de Funciones y Métodos en TypeScript

Funciones y Parámetros en TypeScript: Opcionales, Múltiples y por Defecto

Implementación de Interfaces en TypeScript Paso a Paso

Propiedades y Extensiones en Interfaces de TypeScript

Clases y Programación Orientada a Objetos

Clases y Exportación en TypeScript: Implementación y Mejores Prácticas

Acceso y Modificadores de Visibilidad en Clases de Programación

Extender Clases en TypeScript: Herencia y Métodos Nuevos

Tipos Genéricos en TypeScript: Funciones, Clases e Interfaces

Extensión de Métodos y Funcionalidades en TypeScript

Módulos y Proyectos

Creación y uso de módulos en TypeScript para mejorar el código

Integración de TypeScript en Proyectos Web con HTML y JavaScript

Organización de Archivos TypeScript en Proyectos Web

Manipulación del DOM con TypeScript y Query Selector

Creación de Proyectos React con TypeScript y Plantillas NPM

Creación de Proyectos Angular con TypeScript Paso a Paso

Creación de APIs con TypeScript y Express paso a paso

Conceptos Avanzados

Tipos y Mapeo de Datos en TypeScript

Implementación de Decoradores de Clase en TypeScript y Angular

Comunicación Asíncrona en TypeScript con Fetch y JSON

Pruebas Unitarias en TypeScript con Jest

Introducción a TypeScript para Mejora de Habilidades de Programación