Named Arguments en TypeScript

Una de las cosas que más me cabrea a la hora de programar es perder tiempo, y hoy he perdido dos horas por un bug absurdo:

Imagina un método que cancela un pedido.

function cancelOrder(orderId: Number, date: Number, staffId: Number)

Este método se llama desde 2 sitios diferentes en Vue, uno de ellos funciona, el otro no.

Por más que miraba, no era capaz de encontraba el error, las llamadas eran similares pero no exactamente iguales, pero tenían que funcionar.

<button class="btn btn-default btn-sm" @click="cancelOrder(orderId,date,staffId)">Cancel Order</button>

<button class="btn btn-default btn-sm" @click="cancelOrder(order.id, order.staffId, date)">Cancel Order</button>

Si te fijas bien, y pones los dos fragmentos de códigos juntos, ves el error rápido, pero si tienes el código separado es normal que no caigas en el error a primera vista.

Named Arguments

Una de las incorporaciones de los lenguajes de programación modernos es la posibilidad de especificar el nombre de los parámetros. Esto tiene muchas ventajas, seguro que alguna vez has visto un código así:

addCustomer($name, $email, null, 43, null, 'pending', 'active');

Con perdón, ¿que cojones es cada parámetro?

addCustomer(
        name: $name,
        email: $email,
        referer: null,
        age: 1,
        discount:null,
        status: 'pending',
        premiumAccount: 'active');

De esta forma tenemos una visión rápida de lo que significa cada parámetro, esto ayuda mucho a la hora de encontrar errores.

Pero no sólo sirve para esto, cuando tienes un método con parámetros opcionales, por ejemplo un filtro:

filterUsers(null, null, null, 'pending');

Esta notación es horrible, cuando podía quedar como:

filterUsers(status: 'pending';

Es super claro, no hay duda ninguna.

¿Qué inconveniente tiene? Que no es compatible con vagos. Si. Si un programador es vago, flojo, dejado, etc… le resultará una pérdida de tiempo poner el nombre de los parámetros (aunque Jetbrains/Phpstorm te los pone sólo, pero aún así, son se quejan.

Named Arguments en TypeScript

TypeScript no tiene esta funcionalidad, pero el lenguaje es tremendamente potente y nos ofrece soluciones para implementarlo.

Vamos un par de opciones.

function filterUsers(
{name, email, age, status}:
{name?: string, email?: string, age?: number, status?: string})

De esta forma puedo llamarlo como

const users = filterUsers({status: 'pending'});

La otra forma de usarlo es definiendo un interfaz de forma que puedas compartir el interfaz con otros archivos .ts, dando una solución un poco más solida pero más engorrosa.

export interface FindUsersParams {
name?: string, email?: string, age?: number, status?: string
}

......

const params: FindUsersParams = {
      status: 'pending'
    };
    
const users = filterUsers(params);

De esta forma nos aseguramos de no cometer errores como en el primer ejemplo, donde intercambié el orden de dos parámetros y el código dejó de funcionar.

Resumen

Usar argumentos con nombres en los métodos tiene muchas ventajas y pocos inconvenientes. Ayuda a mejorar la legibilidad, reduce errores y simplifica el manejo de parámetros opcionales. Aunque en TypeScript no existe esta funcionalidad de forma nativa, es posible implementarla utilizando objetos o interfaces, lo cual mejora la claridad del código y previene errores difíciles de detectar, como el intercambio de parámetros.

A medida que los métodos empiezan a tener 4 o más parámetros, esta técnica se vuelve prácticamente indispensable para mantener el código limpio y fácil de entender, aunque requiera un poco más de esfuerzo inicial.