आइए एक यथार्थवादी उदाहरण के साथ कम बार-बार होने वाली टाइपस्क्रिप्ट सुविधा - फ़ंक्शन ओवरलोडिंग के बारे में जानें।

पहचान

एक कस्टम हुक रखें

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

किसी क्षण मुझे इसमें और तर्क जोड़ने की आवश्यकता होगी, संभवतः भविष्य में और अधिक। यह याद रखना कठिन है कि Nth तर्क क्या है, और 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,
) {

मुश्किल बात यह है कि हस्ताक्षर कार्यान्वयन के साथ संगत होने चाहिए, इसलिए यह डिफ़ॉल्ट स्थिति है: टी | {डिफ़ॉल्टस्टेट: टी, सर्चपैराम्स?: ऑब्जेक्ट, रिप्लेस?: बूलियन }

मेरा मानना ​​है कि यदि पहले तर्क में एक विशिष्ट कुंजी है, तो यह एक नया ऑब्जेक्ट प्रारूप है।

  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

पढ़ने के लिए टीएनएक्स :)

अपने अनुभव के बारे में एक टिप्पणी छोड़ें, या यदि आपके पास कोई विचार है कि इसे और अधिक सुंदर ढंग से कैसे किया जाए।