頻度の低い 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にする必要があることです。 {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

読書用に送信:)

あなたの経験について、またはそれをよりエレガントに行う方法のアイデアがある場合は、コメントを残してください。