Parámetros rest

Parámetros rest

Los parámetros rest nos permiten enviar la cantidad que queramos de parámetros a una función, casi sin limite.
.
Funciona de la siguiente manera

// en JS
function sum(...args){
  const addition = args.reduce((static, arg) => static + arg, 0)
  return addition
}

La función de arriba esta hecha en JS y esta, toma todos los parámetros que hayamos pasado a la función y los convierte en un array. En TS se vería de una manera muy similar

// en TS
function sum(...args: number[]){
  const addition = args.reduce((static, arg) => static + arg, 0)
  return addition
}

Lo único que cambia es el tipado en los argumentos.
.
Ya por ultimo, el nombre que le damos a los “rest params” es costumizable, puede ser args, params, props, etc.
Y siempre es recomendable dar estos parámetros al final. Ósea, después de parámetros obligatorios.

function sum(num1, num2, ...args){
  @code
}

El spread operator siempre se me hizo una solución algo mágica, ahora la comprendo mucho mejor.

Les comparto mis apuntes. 😄

¿Qué es parámetros rest?

Se apoya en la flexibilidad que tenemos en JavaScript de enviar parámetros sin ningún problema, que no tienen un fin.

Rest parameters nos permite mandar un conjunto de argumentos a nuestra función y ella los recibe como un arreglo.

Spread operator

A demás de usarlo en poder copiar objetos, también podemos usarlo para poder recibir N parámetros en una función, además vamos a recibir esos parámetros como un array de argumentos.

Sintaxis en JavaScript

function functionName (...parameters) {
	statements
}

Sintaxis en TypeScript

function functionName (...parameters: dataType[]) {
	statements
}

Para enviarle el usuario como 1er argumento

export const checkRoleV4 =(
	user: TUser,...param: string[]
)=>{

	if (param.includes(user.role)){
		return true
	}else{
		return false
	}
}
const rta2 = checkRoleV4(
	anyUser,
	ROLES.ADMIN,
	ROLES.CONSTUMER,
	ROLES.SELLER
)

La sintaxis de los parámetros rest permite representar un número indefinido de argumentos como un array

Ej. de documentación de mozilla

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

Como observación a las clases de muchos cursos:
Es importante llegar al punto lo antes posible, sería producente evitar dar la “chapa” antes de llegar al punto que se quiere mostrar.
En este ejemplo, pudieramos empezar directamente con lo que se va a hacer, indicando cómo se usan los parámetros Rest con TypeScript, y si acaso después dar ejemplos de cómo era antes de TypeScript.
Es aporte para los que crean los cursos

Con typescript pude comprender el operdor spread (…) y como funciona, al momento de tipearlo y ver que se reciben parametros en forma de un arreglo, es de gran ayuda porque al verlo en javascript parece magia.

aunque es algo básico, hay varias personas que siempre se confunden me incluyo, hasta note que el instructor se equivoco creo que es bueno saber,

A mí sí me obliga mandarlos como array 😅

He visto que el código necesita un poco de refactorización. Así lo he hecho.

export const checkRoleV3 = (...roles: string[]) => {
  return roles.includes(currentUser.role); 
}

const rta4 = checkRoleV3(ROLES.ADMIN, ROLES.SELLER, ROLES.CUSTOMER);
console.log('checkRoleV2', rta4);

Además de utilizar parámetros opcionales o sobrecarga para hacer que las funciones acepten una variedad de argumentos, también es posible definir funciones que tomen un número indeterminado de argumentos utilizando rest parameters.

Un parámetro rest aparece al final de la lista de parámetros con un prefijo de tres puntos seguido del nombre del parámetro ...nombre.

function multiplicar(n: number, ...m: number[]): number {
  return m.reduce((p, c) => {
    return p * c;
  }, n);
}

console.log(multiplicar(2, 2));
console.log(multiplicar(2, 2, 3));
console.log(multiplicar(2, 2, 3, 4));

Salida…

4
12
48 

La función multiplicar recibe un segundo parámetro llama m, este almacena todos los números adicionales como parte de un arreglo tipo number y después los multiplica uno a uno.

Interesante recordar el uso del método includes

//si tengo un array con elementos de cualquier tipo
const roles = ['admin', 'vendor', 'seller', 12, true];
//puedo usar el métdodo includes para saber si un valor se encuentra dentro del array, si se encuentra dara true y si no false
roles.includes('vendor');//true
roles.includes('nada');//false
roles.includes(true);//true
roles.includes(12);//true

De hecho, y como una forma de robustecer el código, le asigné al arreglo de los parámetros de la función checkRole un tipado ROLES. De esta manera, el Analizador de Código Estático lanza una advertencia en caso de que se le envíe un valor tipo string aleatorio y un ROLE:

export const checkRole = (...roles:ROLES[]) => {
    if(roles.includes(currentUser.role)){
      return true;
    }
  return false;
}

let sum = (...nums: number[]) => {
    let incremental:number = 0
    nums.forEach(number => incremental+= number)

    return incremental
}

console.log(sum(1,2))
console.log(sum(1,2,3,4,5,6,7,8,9,10))

La suma de varios argumentos utilizando el spread operator

En TypeScript, los parámetros rest son una característica que permite pasar un número variable de argumentos a una función. Esto significa que no tienes que especificar todos los argumentos individualmente en la firma de la función, sino que puedes agruparlos en un solo parámetro utilizando el operador de tres puntos (…). El parámetro rest se representa como un arreglo que contiene todos los argumentos adicionales pasados a la función.
.
Aquí tienes un ejemplo práctico para ilustrar su uso:

function sumar(...numeros: number[]): number {
  let resultado = 0;
  for (let i = 0; i < numeros.length; i++) {
    resultado += numeros[i];
  }
  return resultado;
}

const sumaTotal = sumar(1, 2, 3, 4, 5);
console.log(sumaTotal); // Resultado: 15

En el ejemplo anterior, hemos definido una función llamada sumar que acepta un número variable de argumentos de tipo number. Utilizamos el parámetro rest ...numeros para indicar que queremos agrupar todos los argumentos en un arreglo llamado numeros.
.
Dentro de la función, iteramos sobre el arreglo numeros y sumamos cada elemento para obtener el resultado final. En este caso, pasamos los números 1, 2, 3, 4 y 5 como argumentos al llamar a la función sumar. La función devuelve la suma total, que en este caso es 15.
.
El uso de parámetros rest es útil cuando necesitas trabajar con una cantidad variable de argumentos en una función sin conocer de antemano cuántos serán. Puedes realizar operaciones como sumas, concatenaciones o cualquier otro tipo de procesamiento que requiera trabajar con múltiples valores de entrada.
.
Espero que este ejemplo práctico te ayude a comprender mejor el concepto de los parámetros rest en TypeScript. Si tienes alguna otra pregunta, no dudes en hacerla.

Comparto una función que recibe un usuario que tiene un rol y varios roles para la verificación

// En JS
enum ROLE {
  ADMIN = "admin",
  USER = "user",
  OWNER = "owner",
}

type User = {
  name: string;
  role: ROLE;
};
const verifyRole = (user?: User, ...roles: ROLE[]): void => {
  if (user !== undefined) {
    console.log(
      `El rol ${roles.includes(user.role) ? "se encontró" : "no se encontró"}`
    );
  } else {
    console.log(`No se envió user`);
  }
};

verifyRole();
verifyRole({ name: "victor", role: ROLE.USER });
verifyRole({ name: "victor", role: ROLE.USER }, ROLE.ADMIN, ROLE.OWNER);
verifyRole(
  { name: "victor", role: ROLE.USER },
  ROLE.ADMIN,
  ROLE.OWNER,
  ROLE.USER
);

Una forma más simplificada del codigo min 5

export const checkAdminRole = () => {
	return currentUser.role === ROLES.ADMIN
}

Si me encantaría ver el proyecto que hicimos de Auth full con TypeScript!

Por si alguién también se estaba preguntando cual es la diferencia entre los Rest Params y el objeto Arguments

Diferencia entre los parámetros rest y el objeto arguments
Hay tres principales diferencias entre los parámetros rest y el objeto arguments:

los parámetros rest son sólo aquellos a los que no se les ha asignado un nombre, mientras que el objeto arguments contiene todos los argumentos que se le han pasado a la función;
el objeto arguments no es un array real, mientras que los parámetros rest son instancias de Array , lo que significa que lo los métodos como sort, map, forEach o pop pueden aplicarse directamente;
el objeto arguments tiene una funcionalidad adicional específica para sí mismo (como la propiedad callee).

| Fuente: MozillaGod

args in js/ts

import { User, ROLES } from "../001-enums/enums";

const currentUser: User = {
  usename: 'emeneses',
  role: ROLES.CUSTOMER
};

export const isAdmin = (user: User) => user.role === ROLES.ADMIN

export const checkRole = (user: User, role1: ROLES, role2: ROLES) => (user.role === role1 || user.role === role2);

export const checkRoleV2 = (user: User, roles: ROLES[]) => roles.includes(user.role);

export const checkRoleV3 = (user: User, ...roles: ROLES[]) => roles.includes(user.role);

console.log(isAdmin(currentUser));
console.log(checkRole(currentUser, ROLES.ADMIN, ROLES.SELLER));
console.log(checkRoleV2(currentUser, [ROLES.ADMIN, ROLES.SELLER]));
console.log(checkRoleV3(currentUser, ROLES.ADMIN, ROLES.SELLER, ROLES.CUSTOMER));