Fix types of encodeQueryParams and decodeQueryParams

packages/serialize-query-params/README.md

@@ -138,7 +138,7 @@ const CommaArrayParam = {
 decodeQueryParams<QPCMap extends QueryParamConfigMap>(
   paramConfigMap: QPCMap,
   encodedQuery: Partial<EncodedValueMap<QPCMap>>
-): Partial<DecodedValueMap<QPCMap>>
+): DecodedValueMap<QPCMap>
 ```
 
 Convert the values in query from strings to their natural types via the
@@ -170,7 +170,7 @@ const decodedQuery = decodeQueryParams(
 ```js
 encodeQueryParams<QPCMap extends QueryParamConfigMap>(
   paramConfigMap: QPCMap,
-  query: Partial<DecodedValueMap<QPCMap>>
+  query: Partial<ToBeEncodedValueMap<QPCMap>>
 ): Partial<EncodedValueMap<QPCMap>>
 ```
 

packages/serialize-query-params/src/decodeQueryParams.ts

@@ -5,12 +5,12 @@ import { DecodedValueMap, QueryParamConfigMap, EncodedValueMap } from './types';
  * in paramConfigMap
  *
  * @param paramConfigMap Map from query name to { encode, decode } config
- * @param query Query updates mapping param name to decoded value
+ * @param encodedQuery Query updates mapping param name to decoded value
  */
 export function decodeQueryParams<QPCMap extends QueryParamConfigMap>(
   paramConfigMap: QPCMap,
   encodedQuery: Partial<EncodedValueMap<QPCMap>>
-): Partial<DecodedValueMap<QPCMap>> {
+): DecodedValueMap<QPCMap> {
   const decodedQuery: Partial<DecodedValueMap<QPCMap>> = {};
 
   // iterate over all keys in the config (#30)
@@ -39,9 +39,9 @@ export function decodeQueryParams<QPCMap extends QueryParamConfigMap>(
     } else {
       decodedQuery[paramName as keyof QPCMap] = paramConfigMap[
         paramName
-      ].decode(encodedValue as string | (string | null)[] | null);
+      ].decode(encodedValue);
     }
   }
 
-  return decodedQuery;
+  return decodedQuery as DecodedValueMap<QPCMap>;
 }

packages/serialize-query-params/src/encodeQueryParams.ts

@@ -1,27 +1,27 @@
-import { DecodedValueMap, QueryParamConfigMap, EncodedValueMap } from './types';
+import {QueryParamConfigMap, EncodedValueMap, ToBeEncodedValueMap} from './types';
 
 /**
  * Convert the values in query to strings via the encode functions configured
  * in paramConfigMap
  *
  * @param paramConfigMap Map from query name to { encode, decode } config
- * @param query Query updates mapping param name to decoded value
+ * @param query Map from query name to value to be encoded
  */
 export function encodeQueryParams<QPCMap extends QueryParamConfigMap>(
   paramConfigMap: QPCMap,
-  query: Partial<DecodedValueMap<QPCMap>>
+  query: Partial<ToBeEncodedValueMap<QPCMap>>
 ): Partial<EncodedValueMap<QPCMap>> {
   const encodedQuery: Partial<EncodedValueMap<QPCMap>> = {};
 
   const paramNames = Object.keys(query);
   for (const paramName of paramNames) {
-    const decodedValue = query[paramName];
+    const valueToBeEncoded = query[paramName];
 
     if (!paramConfigMap[paramName]) {
       // NOTE: we could just not encode it, but it is probably convenient to have
       // it be included by default as a string type.
       (encodedQuery as any)[paramName] =
-        decodedValue == null ? decodedValue : String(decodedValue);
+          valueToBeEncoded == null ? valueToBeEncoded : String(valueToBeEncoded);
     } else {
       encodedQuery[paramName as keyof QPCMap] = paramConfigMap[
         paramName

packages/serialize-query-params/src/index.ts

@@ -52,6 +52,7 @@ export type {
   QueryParamConfigMap,
   DecodedValueMap,
   EncodedValueMap,
+  ToBeEncodedValueMap
 } from './types';
 
 export {

packages/serialize-query-params/src/serialize.ts

@@ -1,10 +1,12 @@
+import {EncodedValue} from "types";
+
 /**
  * Interprets an encoded string and returns either the string or null/undefined if not available.
  * Ignores array inputs (takes just first element in array)
  * @param input encoded string
  */
 function getEncodedValue(
-  input: string | (string | null)[] | null | undefined,
+  input: EncodedValue,
   allowEmptyString?: boolean
 ): string | null | undefined {
   if (input == null) {
@@ -35,7 +37,7 @@ function getEncodedValue(
  * @param input encoded string
  */
 function getEncodedValueArray(
-  input: string | (string | null)[] | null | undefined
+  input: EncodedValue
 ): (string | null)[] | null | undefined {
   if (input == null) {
     return input;
@@ -78,7 +80,7 @@ export function encodeDate(
  * @return {Date} parsed date
  */
 export function decodeDate(
-  input: string | (string | null)[] | null | undefined
+  input: EncodedValue
 ): Date | null | undefined {
   const dateString = getEncodedValue(input);
   if (dateString == null) return dateString;
@@ -130,7 +132,7 @@ export function encodeDateTime(
  * @return {Date} parsed date
  */
 export function decodeDateTime(
-  input: string | (string | null)[] | null | undefined
+  input: EncodedValue
 ): Date | null | undefined {
   const dateString = getEncodedValue(input);
   if (dateString == null) return dateString;
@@ -170,7 +172,7 @@ export function encodeBoolean(
  * @return {Boolean} the boolean value
  */
 export function decodeBoolean(
-  input: string | (string | null)[] | null | undefined
+  input: EncodedValue
 ): boolean | null | undefined {
   const boolStr = getEncodedValue(input);
   if (boolStr == null) return boolStr;
@@ -210,7 +212,7 @@ export function encodeNumber(
  * @return {Number} the number value
  */
 export function decodeNumber(
-  input: string | (string | null)[] | null | undefined
+  input: EncodedValue
 ): number | null | undefined {
   const numStr = getEncodedValue(input);
   if (numStr == null) return numStr;
@@ -227,7 +229,7 @@ export function decodeNumber(
  * @return {String} the encoded string
  */
 export function encodeString(
-  str: string | (string | null)[] | null | undefined
+  str: EncodedValue
 ): string | null | undefined {
   if (str == null) {
     return str;
@@ -245,7 +247,7 @@ export function encodeString(
  * @return {String} the string value
  */
 export function decodeString(
-  input: string | (string | null)[] | null | undefined
+  input: EncodedValue
 ): string | null | undefined {
   const str = getEncodedValue(input, true);
   if (str == null) return str;
@@ -263,7 +265,7 @@ export function decodeString(
  * @return {String} the string value from enumValues
  */
 export function decodeEnum<T extends string>(
-  input: string | (string | null)[] | null | undefined,
+  input: EncodedValue,
   enumValues: T[]
 ): T | null | undefined {
   const str = decodeString(input);
@@ -280,7 +282,7 @@ export function decodeEnum<T extends string>(
  * @return {T[]} the string value from enumValues
  */
 export function decodeArrayEnum<T extends string>(
-  input: string | (string | null)[] | null | undefined,
+  input: EncodedValue,
   enumValues: T[]
 ): T[] | null | undefined {
   const arr = decodeArray(input);
@@ -302,7 +304,7 @@ export function decodeArrayEnum<T extends string>(
  * @return {T[]} the string value from enumValues
  */
 export function decodeDelimitedArrayEnum<T extends string>(
-  input: string | (string | null)[] | null | undefined,
+  input: EncodedValue,
   enumValues: T[],
   entrySeparator = '_'
 ): T[] | null | undefined {
@@ -336,7 +338,7 @@ export function encodeJson(
  * @return {Any} The javascript representation
  */
 export function decodeJson(
-  input: string | (string | null)[] | null | undefined
+  input: EncodedValue
 ): any | null | undefined {
   const jsonStr = getEncodedValue(input);
   if (jsonStr == null) return jsonStr;
@@ -376,7 +378,7 @@ export function encodeArray(
  * @return {Array} The javascript representation
  */
 export function decodeArray(
-  input: string | (string | null)[] | null | undefined
+  input: EncodedValue
 ): (string | null)[] | null | undefined {
   const arr = getEncodedValueArray(input);
   if (arr == null) return arr;
@@ -409,7 +411,7 @@ export function encodeNumericArray(
  * @return {Array} The javascript representation
  */
 export function decodeNumericArray(
-  input: string | (string | null)[] | null | undefined
+  input: EncodedValue
 ): (number | null)[] | null | undefined {
   const arr = decodeArray(input);
   if (arr == null) return arr;
@@ -449,7 +451,7 @@ export function encodeDelimitedArray(
  * @return {Array} The javascript representation
  */
 export function decodeDelimitedArray(
-  input: string | (string | null)[] | null | undefined,
+  input: EncodedValue,
   entrySeparator = '_'
 ): (string | null)[] | null | undefined {
   const arrayStr = getEncodedValue(input, true);
@@ -481,7 +483,7 @@ export const encodeDelimitedNumericArray = encodeDelimitedArray as (
  * @return {Array} The javascript representation
  */
 export function decodeDelimitedNumericArray(
-  arrayStr: string | (string | null)[] | null | undefined,
+  arrayStr: EncodedValue,
   entrySeparator = '_'
 ): (number | null)[] | null | undefined {
   const decoded = decodeDelimitedArray(arrayStr, entrySeparator);
@@ -528,7 +530,7 @@ export function encodeObject(
  * @return {Object} The javascript object
  */
 export function decodeObject(
-  input: string | (string | null)[] | null | undefined,
+  input: EncodedValue,
   keyValSeparator = '-',
   entrySeparator = '_'
 ): { [key: string]: string } | null | undefined {
@@ -577,7 +579,7 @@ export const encodeNumericObject = encodeObject as (
  * @return {Object} The javascript object
  */
 export function decodeNumericObject(
-  input: string | (string | null)[] | null | undefined,
+  input: EncodedValue,
   keyValSeparator = '-',
   entrySeparator = '_'
 ): { [key: string]: number | null | undefined } | null | undefined {

packages/serialize-query-params/src/types.ts

@@ -1,8 +1,13 @@
+/**
+ * Encoded query parameter's value
+ */
+export type EncodedValue = string | (string | null)[] | null | undefined;
+
 /**
  * Encoded query parameters, possibly including null or undefined values
  */
 export interface EncodedQuery {
-  [key: string]: string | (string | null)[] | null | undefined;
+  [key: string]: EncodedValue;
 }
 
 /**
@@ -15,10 +20,10 @@ export interface EncodedQuery {
  */
 export interface QueryParamConfig<D, D2 = D> {
   /** Convert the query param value to a string */
-  encode: (value: D) => string | (string | null)[] | null | undefined;
+  encode: (value: D) => EncodedValue;
 
   /** Convert the query param string value to its native type */
-  decode: (value: string | (string | null)[] | null | undefined) => D2;
+  decode: (value: EncodedValue) => D2;
 
   /** Checks if two values are equal (otherwise typically shallowEqual will be used) */
   equals?: (valueA: D | D2, valueB: D | D2) => boolean;
@@ -60,5 +65,12 @@ export type DecodedValueMap<QPCMap extends QueryParamConfigMap> = {
  * Mapping from a query parameter name to it's encoded value type
  */
 export type EncodedValueMap<QPCMap extends QueryParamConfigMap> = {
-  [P in keyof QPCMap]: string | (string | null)[] | null | undefined;
+  [P in keyof QPCMap]: EncodedValue;
+};
+
+/**
+ * Mapping from a query parameter name to it's value to be encoded
+ */
+export type ToBeEncodedValueMap<QPCMap extends QueryParamConfigMap> = {
+  [P in keyof QPCMap]: Parameters<QPCMap[P]['encode']>[0];
 };

packages/use-query-params/README.md

@@ -386,8 +386,14 @@ const CommaArrayParam = {
 #### useQueryParam
 
 ```js
-useQueryParam<T>(name: string, paramConfig?: QueryParamConfig<T>, options?: QueryParamOptions):
-  [T | undefined, (newValue: T, updateType?: UrlUpdateType) => void]
+useQueryParam<TypeToEncode, TypeFromDecode = TypeToEncode>(
+  name: string,
+  paramConfig?: QueryParamConfig<TypeToEncode, TypeFromDecode>,
+  options?: QueryParamOptions
+): [
+  TypeFromDecode, 
+  (newValue: NewValueType<TypeToEncode>, updateType?: UrlUpdateType) => void
+]
 ```
 
 Given a query param name and query parameter configuration `{ encode, decode }`
@@ -551,8 +557,8 @@ is one of `'pushIn' | 'push' | 'replaceIn' | 'replace'`, defaulting to
 ```js
 encodeQueryParams<QPCMap extends QueryParamConfigMap>(
   paramConfigMap: QPCMap,
-  query: Partial<DecodedValueMap<QPCMap>>
-): EncodedQueryWithNulls
+  query: Partial<ToBeEncodedValueMap<QPCMap>>
+): Partial<EncodedValueMap<QPCMap>>
 ```
 
 Convert the values in query to strings via the encode functions configured

packages/use-query-params/src/types.ts

@@ -2,6 +2,7 @@ import {
   QueryParamConfigMap,
   DecodedValueMap,
   QueryParamConfig,
+  ToBeEncodedValueMap,
 } from 'serialize-query-params';
 
 /**
@@ -19,10 +20,10 @@ export type UrlUpdateType = 'replace' | 'replaceIn' | 'push' | 'pushIn';
  */
 export type SetQuery<QPCMap extends QueryParamConfigMap> = (
   changes:
-    | Partial<DecodedValueMap<QPCMap>>
+    | Partial<ToBeEncodedValueMap<QPCMap>>
     | ((
         latestValues: DecodedValueMap<QPCMap>
-      ) => Partial<DecodedValueMap<QPCMap>>),
+      ) => Partial<ToBeEncodedValueMap<QPCMap>>),
   updateType?: UrlUpdateType
 ) => void;
 

packages/use-query-params/src/useQueryParams.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  ToBeEncodedValueMap,
   DecodedValueMap,
   QueryParamConfig,
   QueryParamConfigMap,
@@ -23,9 +24,9 @@ import { enqueueUpdate } from './updateSearchString';
 import { serializeUrlNameMap } from './urlName';
 
 // for multiple param config
-type ChangesType<DecodedValueMapType> =
-  | Partial<DecodedValueMapType>
-  | ((latestValues: DecodedValueMapType) => Partial<DecodedValueMapType>);
+type ChangesType<QPCMap extends QueryParamConfigMap> =
+  | Partial<ToBeEncodedValueMap<QPCMap>>
+  | ((latestValues: DecodedValueMap<QPCMap>) => Partial<ToBeEncodedValueMap<QPCMap>>);
 
 type UseQueryParamsResult<QPCMap extends QueryParamConfigMap> = [
   DecodedValueMap<QPCMap>,