Давайте углубимся в менее распространенную функцию Typescript — перегрузку функций на реалистичном примере.

Введение

Настройте собственный крючок

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

В какой-то момент мне понадобится добавить к нему больше аргументов, возможно, больше в будущем. Трудно запомнить, что такое N-й аргумент, а вызывать такую ​​функцию, как useUrlState(firstArg, null, null, fourArg), просто смешно. Будет проще передавать аргументы внутри объекта следующим образом:

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

Я преобразую функцию в новый формат и сохраняю ее обратную совместимость с существующей реализацией.

Выполнение

Во-первых, нужно добавить подписи перегрузки прямо над реализацией функции. Сигнатуры перегрузки — это все возможные способы вызова функции с различным типом и количеством аргументов.

/**
 * @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,
) {

Сложность заключается в том, что подписи должны быть совместимы с реализацией, поэтому используйте это defaultState: T | { defaultState: T, searchParams?: объект, замена?: логическое значение }

Я предполагаю, что если первый аргумент имеет определенный ключ, это новый формат объекта.

  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

Кроме того, можно заметить, что аргумент replace имеет значение по умолчанию true для нового формата, а для старого — false.

Давайте посмотрим, как это работает.

Обратите внимание, что у нас есть разные комментарии JSDoc для каждой подписи, старый комментарий отмечен тегом @deprecated.

Официальная документация https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads

Спасибо за прочтение :)

Оставьте комментарий о своем опыте или если у вас есть идеи, как сделать это более элегантно.