اضافه بار عملکرد در TypeScript – DEV Community

Summarize this content to 400 words in Persian Lang
هنگام کار با TypeScript، ممکن است با شرایطی مواجه شوید که یک تابع نیاز به مدیریت انواع مختلف ورودی با حفظ ایمنی نوع داشته باشد. اینجاست که اضافه بار عملکرد وارد عمل می شود. بیایید به یک مثال عملی از بارگذاری بیش از حد تابع، الهام گرفته از یک قطعه کد از کد منبع Supabase نگاه کنیم.

مثال: useIsFeatureEnabled

تابع useIsFeatureEnabled یک مثال عالی از بارگذاری بیش از حد تابع است. این می‌تواند هم مجموعه‌ای از ویژگی‌ها و هم یک ویژگی واحد را کنترل کند و نتایج مناسب را برای هر مورد به دست آورد.

در اینجا تعریف تابع بیش از حد بارگذاری شده است:

function useIsFeatureEnabledT extends Feature\[\]>(
features: T
): { \[key in FeatureToCamelCaseT\[number\]>\]: boolean }
function useIsFeatureEnabled(features: Feature): boolean
function useIsFeatureEnabledT extends Feature | Feature\[\]>(features: T) {
const { profile } = useProfile()

if (Array.isArray(features)) {
return Object.fromEntries(
features.map((feature) => \[
featureToCamelCase(feature),
checkFeature(feature, profile?.disabled\_features),
\])
)
}
return checkFeature(features, profile?.disabled\_features)
}
export { useIsFeatureEnabled }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چگونه کار می کند

عملکرد اضافه بار: دو اعلامیه اول امضاهای اضافه بار هستند. آنها روش های مختلفی را برای فراخوانی تابع تعریف می کنند. اجرای واقعی آخرین مرحله است و هر دو مورد را مدیریت می کند.
پیاده سازی: اجرای تابع بررسی می کند که آیا ویژگی های ورودی یک آرایه هستند یا خیر. اگر اینطور باشد، هر ویژگی را پردازش می‌کند، آن را به camelCase تبدیل می‌کند و فعال بودن آن را بررسی می‌کند. اگر ویژگی ها یک ویژگی واحد باشد، مستقیماً وضعیت آن را بررسی می کند.

توابع و انواع پشتیبانی

برای درک بهتر این موضوع، اجازه دهید به تابع checkFeature و نوع ابزار FeatureToCamelCase نگاه کنیم.

بررسی عملکرد

تابع checkFeature تعیین می کند که آیا یک ویژگی مشخص فعال است یا خیر:

function checkFeature(feature: Feature, features?: Feature\[\]) {
return !features?.includes(feature) ?? true
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اگر ویژگی در لیست ویژگی‌های غیرفعال نباشد یا هیچ ویژگی غیرفعال‌شده‌ای ارائه نشده باشد، این تابع true را برمی‌گرداند.

تماشا کن توضیح ویدیوی مت پوکاک در یوتیوب در مورد اضافه بارهای تابع در TypeScript.

نتیجه

بارگذاری بیش از حد تابع در TypeScript به شما این امکان را می دهد که چندین راه برای فراخوانی یک تابع با انواع ورودی تعریف کنید و در عین حال ایمنی نوع را تضمین کنید. تابع useIsFeatureEnabled از Supabase یک مثال عالی از این مفهوم در عمل است. این نشان می دهد که چگونه می توان انواع ورودی های مختلف را به طور یکپارچه مدیریت کرد و هم انعطاف پذیری و هم تایپ قوی را ارائه می دهد.

آیا می خواهید یاد بگیرید که چگونه shadcn-ui/ui را از ابتدا بسازید؟ وارسی ساختن از ابتدا

درمورد من:

وب سایت: https://ramunarasinga.com/

لینکدین: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

ایمیل: ramu.narasinga@gmail.com

shadcn-ui/ui را از ابتدا بسازید

منابع:

https://github.com/supabase/supabase/blob/master/apps/studio/hooks/misc/useIsFeatureEnabled.ts#L24

توضیح ویدیوی مت پوکاک در یوتیوب.

function useIsFeatureEnabledT extends Feature\[\]>(
  features: T
): { \[key in FeatureToCamelCaseT\[number\]>\]: boolean }
function useIsFeatureEnabled(features: Feature): boolean
function useIsFeatureEnabledT extends Feature | Feature\[\]>(features: T) {
  const { profile } = useProfile()

  if (Array.isArray(features)) {
      return Object.fromEntries(
        features.map((feature) => \[
          featureToCamelCase(feature),
          checkFeature(feature, profile?.disabled\_features),
        \])
      )
  }
  return checkFeature(features, profile?.disabled\_features)
}
export { useIsFeatureEnabled }

function checkFeature(feature: Feature, features?: Feature\[\]) {
  return !features?.includes(feature) ?? true
}