Profundicemos en la función Typecript menos frecuente: sobrecarga de funciones con un ejemplo realista.

Introducción

Tener un gancho personalizado

export function useUrlState(
  defaultState: T,
  searchParams?: object,
)

En algún momento necesito agregarle más argumentos, posiblemente más en el futuro. Es difícil recordar cuál es el enésimo argumento y llamar a una función como useUrlState(firstArg, null, null, fourArg) es ridículo. Será mucho más fácil pasar argumentos dentro de un objeto como este:

export function useUrlState({
  defaultState,
  searchParams,
  replace
}: { defaultState: T, searchParams?: object, replace?: boolean })

Convertiré la función a un nuevo formato y la mantendré compatible con la implementación existente.

Implementación

Primero, es necesario agregar firmas de sobrecarga justo encima de la función implementación. Las firmas de sobrecarga son todas formas posibles de llamar a una función, con diferentes tipos y cantidades de argumentos.

/**
 * @deprecated Pass arguments in a object `useUrlState({ defaultState: form, searchParams })`
 *
 *  * Github {@link https://github.com/asmyshlyaev177/state-in-url/tree/main/packages/urlstate/next/useUrlState#api}
 */
export function useUrlState(defaultState: T, searchParams?: object): {
  state: DeepReadonly,
  updateState: (value: Partial>,
  updateUrl: (value?: Partial>) => void,
  getState: () => DeepReadonly
}
/**
 * NextJS hook. Returns `state`, `updateState`, and `updateUrl` functions
 *
 * @param {JSONCompatible} [defaultState] Fallback (default) values for state
 * @param {?SearchParams} [searchParams] searchParams from Next server component
 */
export function useUrlState({ defaultState, searchParams }: {
  defaultState: T, searchParams?: object, replace?: boolean
}): {
  state: DeepReadonly,
  updateState: (value: Partial>) => void,
  updateUrl: (value?: Partial>) => void,
  getState: () => DeepReadonly
} // (
  defaultState: T | { defaultState: T, searchParams?: object, replace?: boolean },
  searchParams?: object,
) {

La parte complicada es que las firmas deben ser compatibles con la implementación, así que tenga este estado predeterminado: T | { defaultState: T, searchParams?: objeto, ¿reemplazar?: booleano }

Supongo que si el primer argumento tiene una clave específica, es un nuevo formato de objeto.

  const _defaultState = ('defaultState' in defaultState ? defaultState.defaultState : defaultState) as T
  const _searchParams = ('defaultState' in defaultState ? defaultState.searchParams : searchParams) as object | undefined
  const _replace = ('defaultState' in defaultState ? defaultState.replace ?? true : false) as boolean

Además, puedo observar que el argumento de reemplazo tiene un valor predeterminado verdadero para un formato nuevo, pero para uno antiguo es falso.

Veamos cómo funciona.

Observe que tenemos diferentes comentarios JSDoc para cada firma, el antiguo marcado con la etiqueta @deprecated.

Documentos oficiales https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads

Gracias por leer :)

Deja un comentario sobre tu experiencia, o si tienes ideas de cómo hacerlo de forma más elegante.