Lassen Sie uns anhand eines realistischen Beispiels in die weniger häufige Typescript-Funktion eintauchen – Funktionsüberladung.

Einführung

Haben Sie einen benutzerdefinierten Hook

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

Irgendwann muss ich weitere Argumente hinzufügen, möglicherweise in Zukunft noch mehr. Es ist schwer, sich daran zu erinnern, was das N-te Argument ist, und der Aufruf einer Funktion wie useUrlState(firstArg, null, null, fourArg) ist lächerlich. Es wird viel einfacher sein, Argumente innerhalb eines Objekts wie diesem zu übergeben:

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

Ich werde die Funktion in ein neues Format konvertieren und sie abwärtskompatibel mit der vorhandenen Implementierung halten.

Durchführung

Zuerst müssen Überladungssignaturen direkt über der Funktion Implementierung hinzugefügt werden. Überladungssignaturen sind alle möglichen Arten, wie eine Funktion aufgerufen werden kann, mit unterschiedlichem Argumenttyp und unterschiedlicher Anzahl.

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

Der schwierige Teil besteht darin, dass Signaturen mit der Implementierung kompatibel sein sollten, also haben Sie diesen Standardstatus: T | { defaultState: T, searchParams?: object, replacement?: boolean }

Ich gehe davon aus, dass es sich um ein neues Objektformat handelt, wenn das erste Argument einen bestimmten Schlüssel hat.

  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

Sie können außerdem feststellen, dass das Ersetzungsargument für ein neues Format den Standardwert „true“ hat, für das alte jedoch „false“.

Mal sehen, wie es funktioniert.

Beachten Sie, dass wir für jede Signatur unterschiedliche JSDoc-Kommentare haben, der alte ist mit dem @deprecated-Tag gekennzeichnet.

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

Tnx zum Lesen :)

Hinterlassen Sie einen Kommentar zu Ihren Erfahrungen oder wenn Sie Ideen haben, wie Sie es eleganter machen können.