بارگذاری بیش از حد تابع TS – مثال دنیای واقعی

Summarize this content to 400 words in Persian Lang بیایید به ویژگی Typescript کم‌تکرار بپردازیم – اضافه بار عملکرد با یک مثال واقع بینانه

مقدمه

یک قلاب سفارشی داشته باشید

export function useUrlState<T extends JSONCompatible>(
defaultState: T,
searchParams?: object,
)

در یک لحظه باید استدلال های بیشتری به آن اضافه کنم، احتمالاً در آینده بیشتر. به خاطر سپردن آرگومان N ام و فراخوانی تابعی مانند آن سخت است useUrlState(firstArg, null, null, fourthArg) مضحک است ارسال آرگومان ها در داخل یک شی مانند این بسیار ساده تر خواهد بود:

export function useUrlState<T extends JSONCompatible>({
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<T extends JSONCompatible>(defaultState: T, searchParams?: object): {
state: DeepReadonly<T>,
updateState: (value: Partial<DeepReadonly<T>>,
updateUrl: (value?: Partial<DeepReadonly<T>>) => void,
getState: () => DeepReadonly<T>
}
/**
* NextJS hook. Returns `state`, `updateState`, and `updateUrl` functions
*
* @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
* @param {?SearchParams<T>} [searchParams] searchParams from Next server component
*/
export function useUrlState<T extends JSONCompatible>({ defaultState, searchParams }: {
defaultState: T, searchParams?: object, replace?: boolean
}): {
state: DeepReadonly<T>,
updateState: (value: Partial<DeepReadonly<T>>) => void,
updateUrl: (value?: Partial<DeepReadonly<T>>) => void,
getState: () => DeepReadonly<T>
} // <- notice that should implicitly define returned value
// implementation
export function useUrlState<T extends JSONCompatible>(
defaultState: T | { defaultState: T, searchParams?: object, replace?: boolean },
searchParams?: object,
) {

بخش مشکل این است که امضا باید باشد سازگار با اجرا، پس این را داشته باشید defaultState: T | { defaultState: T, searchParams?: object, replace?: boolean }

من فرض می کنم که اگر آرگومان اول یک کلید خاص داشته باشد، یک قالب شی جدید است.

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

Tnx برای خواندن 🙂

در مورد تجربه خود نظر بدهید یا اگر ایده ای دارید که چگونه آن را زیباتر انجام دهید.

بیایید به ویژگی Typescript کم‌تکرار بپردازیم – اضافه بار عملکرد با یک مثال واقع بینانه

مقدمه

یک قلاب سفارشی داشته باشید

export function useUrlState<T extends JSONCompatible>(
  defaultState: T,
  searchParams?: object,
)

در یک لحظه باید استدلال های بیشتری به آن اضافه کنم، احتمالاً در آینده بیشتر. به خاطر سپردن آرگومان N ام و فراخوانی تابعی مانند آن سخت است useUrlState(firstArg, null, null, fourthArg) مضحک است ارسال آرگومان ها در داخل یک شی مانند این بسیار ساده تر خواهد بود:

export function useUrlState<T extends JSONCompatible>({
  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<T extends JSONCompatible>(defaultState: T, searchParams?: object): {
  state: DeepReadonly<T>,
  updateState: (value: Partial<DeepReadonly<T>>,
  updateUrl: (value?: Partial<DeepReadonly<T>>) => void,
  getState: () => DeepReadonly<T>
}
/**
 * NextJS hook. Returns `state`, `updateState`, and `updateUrl` functions
 *
 * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state
 * @param {?SearchParams<T>} [searchParams] searchParams from Next server component
 */
export function useUrlState<T extends JSONCompatible>({ defaultState, searchParams }: {
  defaultState: T, searchParams?: object, replace?: boolean
}): {
  state: DeepReadonly<T>,
  updateState: (value: Partial<DeepReadonly<T>>) => void,
  updateUrl: (value?: Partial<DeepReadonly<T>>) => void,
  getState: () => DeepReadonly<T>
} // <- notice that should implicitly define returned value
// implementation
export function useUrlState<T extends JSONCompatible>(
  defaultState: T | { defaultState: T, searchParams?: object, replace?: boolean },
  searchParams?: object,
) {

بخش مشکل این است که امضا باید باشد سازگار با اجرا، پس این را داشته باشید defaultState: T | { defaultState: T, searchParams?: object, replace?: boolean }

من فرض می کنم که اگر آرگومان اول یک کلید خاص داشته باشد، یک قالب شی جدید است.

  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

Tnx برای خواندن 🙂

در مورد تجربه خود نظر بدهید یا اگر ایده ای دارید که چگونه آن را زیباتر انجام دهید.