const [params, setParams] = useUrlSearchParams({ name: 'loi', age: Number, handsome: true }); // see value ('loi') and type (Number) are mixed

{ 
  name?: string, 
  age?: number, 
  handsome?: boolean 
}

type Params = { name:'loi' | 'Loi', age: number, handsome: true }
const [params, setParams] = useUrlSearchParams({ name: 'loi', age: 21, handsome: true } as Params);

{ 
  name?: 'loi' | 'Loi' /* instead of string */, 
  age?: number, 
  handsome?: true /* instead of boolean */ 
}

const [params, setParams] = useUrlSearchParams({
  name: 'loi' as 'loi | 'Loi',
  age: Number,
  handsome: true as true
});

import { useUrlSearchParams as useOriginal } from 'use-url-search-params';

/**
 * mix of Constructor and initial params
 * e.g: TProps { a: '1', b: Number } will result to:
 * - type typescript of { a: string, b: number }
 * - type check (second param of useOriginal) of { a: String, b: Number }
 * - initial params of { a: '1' } or ?a=1
 */
type TProps = Readonly<{
  [key: string]:
    | NumberConstructor
    | StringConstructor
    | BooleanConstructor
    | DateConstructor
    | number
    | string
    | boolean
    | Date;
  // See all the types supported by use-url-search-params here:
  // https://github.com/rudyhuynh/use-url-search-params/blob/95b0880bf9e2bf84e19c779b2a4078a47271ea9c/src/useUrlSearchParams.js#L4
}>;

/**
 * Convert from TProps to typescript type of the params
 * e.g: TProps { a: '1', b: Number } will result to:
 * { a: string, b: number }
 */
type GetUrlSearchParams<T extends TProps> = {
  // We have the ? (optional) here because URLSearchParams is an external thing, so we cannot control whether it is presented as we expected it to be
  [K in keyof T]?: T[K] extends NumberConstructor
    ? number
    : T[K] extends StringConstructor
    ? string
    : T[K] extends BooleanConstructor
    ? boolean
    : T[K] extends DateConstructor
    ? Date
    : T[K];
};

/**
 *
 * @param value mixed of initial param values and Constructors
 * @returns whether the "value" is just a value, not a Constructor
 * e.g: '1' => true, Number => false, String => false
 */
const isNotConstructor = (
  value: TProps[string],
): value is string | number | boolean | Date =>
  typeof value === 'string' ||
  typeof value === 'number' ||
  typeof value === 'boolean' ||
  value instanceof Date;

/**
 * wrapper around the original "useUrlSearchParams":
 * https://github.com/rudyhuynh/use-url-search-params
 */
export function useUrlSearchParams<Props extends TProps>(initialOrType: Props) {
  // exptract "initial" from "initialOrType"
  // desired result: { param1: 'value1', param2: 123456 }
  const initParams = Object.fromEntries(
    // Learn the Object.fromEntries/Object.entries combination here:
    // https://stackoverflow.com/a/14810722/9787887
    Object.entries(initialOrType).filter(([_, value]) =>
      isNotConstructor(value),
    ),
  );

  // exptract "type" from "initialOrType"
  // desired result: { param1: String, param2: Number }
  const paramsTypes = Object.fromEntries(
    Object.entries(initialOrType).map(([key, value]) => [
      key,
      isNotConstructor(value) ? value.constructor : value,
    ]),
  );

  const [params, setParams] = useOriginal(initParams, paramsTypes);

  // The setParams will add params to current params, NOT flush out all current params
  // E.g: ?a=1&b=2, setParams({a:3}) will result in ?a=3&b=2
  // look at its implementation here:
  // https://github.com/rudyhuynh/use-url-search-params/blob/95b0880bf9e2bf84e19c779b2a4078a47271ea9c/src/useUrlSearchParams.js#L11
  return [params, setParams] as unknown as [
    GetUrlSearchParams<Props>,
    (newParams: GetUrlSearchParams<Props>) => void,
  ];
}