دعونا نتعمق في ميزة 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,
) {

الجزء الصعب هو أن التوقيعات يجب أن تكون متوافقة مع التنفيذ، لذلك لديك هذه الحالة الافتراضية: 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

أيضًا، يمكن ملاحظة أن وسيطة الاستبدال لها قيمة افتراضية صحيحة بالنسبة للتنسيق الجديد، ولكنها غير صحيحة بالنسبة للتنسيق القديم.

دعونا نرى كيف يعمل.

لاحظ أن لدينا تعليقات JSDoc مختلفة لكل توقيع، وقد تم وضع علامة @deprecated على التعليقات القديمة.

المستندات الرسمية https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads

شكرًا للقراءة :)

اترك تعليقًا حول تجربتك، أو إذا كانت لديك أفكار حول كيفية القيام بذلك بشكل أكثر أناقة.