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.

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

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
}

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.

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.

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));