TypeScript 中的函数重载

在使用 TypeScript 时，你可能会遇到需要处理不同类型输入的函数，同时保持类型安全。这就是函数重载的用武之地。让我们通过一个受 Supabase 源代码启发的实际示例来了解函数重载。

示例：useIsFeatureEnabled

useIsFeatureEnabled 函数是函数重载的一个极佳示例。它可以处理特性数组和单个特性，并为每种情况返回适当的结果。

以下是重载函数定义：

function useIsFeatureEnabled<T extends Feature[]>(features: T): { [key in FeatureToCamelCase<T[number]>]: boolean }
function useIsFeatureEnabled(features: Feature): boolean
function useIsFeatureEnabled<T 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 }复制

工作原理

1. 函数重载：前两个声明是重载签名。它们定义了函数可以调用的不同方式。实际实现放在最后，处理这两种情况。

2. 实现：函数实现检查输入的 features 是否为数组。如果是，则处理每个特性，将其转换为 camelCase，并检查其是否启用。如果 features 是单个特性，则直接检查其状态。

支持函数和类型

为了更好地理解这个例子，让我们看看支持的 checkFeature 函数和类型工具 FeatureToCamelCase。

checkFeature 函数

checkFeature 函数确定给定特性是否启用：

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

如果特性不在禁用特性列表中或未提供禁用特性，则此函数返回 true。

建议观看 Matt Pocock 的 YouTube 视频解释 关于 TypeScript 中的函数重载。

结论

TypeScript 中的函数重载允许你定义多种方式来调用函数，处理不同类型的输入，同时确保类型安全。Supabase 的 useIsFeatureEnabled 函数是这一概念的优秀示例。它展示了如何无缝处理不同的输入类型，提供灵活性和强类型。