TypeScript使用函数重载确定返回类型的实现方法

import { useLocation } from 'react-router-dom';

// 定义 QueryParamsKey 类型为 string 或 Record<string, string>
type QueryParamsKey = string | Record<string, string>;

// 定义返回类型
type QueryParamsResult = Record<string, string>;

const useGetQueryParams = (key: QueryParamsKey): QueryParamsResult => {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  
  // 初始化返回结果
  let values: QueryParamsResult = {};

  // 类型守卫，判断 key 是否为字符串
  if (typeof key === 'string') {
    values[key] = queryParams.get(key) || '';
  } else if (typeof key === 'object' && key !== null) {
    // 遍历对象中的每个键，并获取对应的查询参数
    Object.keys(key).forEach((k) => {
      // 使用 key 中的值作为查询参数的键
      values[k] = queryParams.get(key[k]) || '';
    });
  }
  
  return values;
};

export default useGetQueryParams;

import { useLocation } from 'react-router';

type QueryParamsKeys = string | string[];
type QueryParamsResult = Record<string, string | null>;

// 函数重载声明
function useGetQueryParams(key: string): string | null;
function useGetQueryParams(keys: string[]): QueryParamsResult;

// 函数实现
function useGetQueryParams(keys: QueryParamsKeys): string | null | QueryParamsResult {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  // 处理单个键的情况
  if (typeof keys === 'string') {
    return queryParams.get(keys);
  }
  // 处理键数组的情况
  else if (Array.isArray(keys)) {
    const values: QueryParamsResult = {};
    keys.forEach((k) => {
      values[k] = queryParams.get(k);
    });
    return values;
  }

  throw new Error('Invalid keys argument');
}

export default useGetQueryParams;

// 函数声明，可以进行重载
function greet(name: string): string;
function greet(age: number): string;
function greet(single: boolean): string;
function greet(value: string | number | boolean): string {
  // 实际的实现逻辑
  return `Hello, ${value}`;
}

// 定义函数类型
type GreetFunction = {
  (name: string): string;
  (age: number): string;
  (single: boolean): string;
};

// 定义变量并赋予箭头函数，但实际上这不是函数重载
const greet: GreetFunction = (value: string | number | boolean): string => {
  // 实际的实现逻辑
  return `Hello, ${value}`;
};