Enhancing Type Safety in useStyles, useStylesV2, and mergeObjects Functions

This commit improves type safety in the useStyles, useStylesV2, and mergeObjects functions, along with their associated tests. The types of customTokens and the objects being merged are now more strictly defined.

Changes include:

useStyles and useStylesV2 functions now require T to extend object, and customTokens is now of type Partial<T>. This ensures that customTokens is a subset of T.

mergeObjects function now requires its target and sources parameters to extend object. The return type is now Partial<T & S>, indicating that the result is a subset of the union of T and S.

Tests for mergeObjects have been updated to reflect the new types. The objects being merged are now explicitly typed.

Author: Hector Arce De Las Heras

src/hooks/useStyles/useStyles.tsx

@@ -5,10 +5,10 @@ import { mergeObjects } from '@/utils/mergeObjects/mergeObjects';
 /**
  * @version This hook has a upper version, please use useStylesV2
  */
-export const useStyles = <T, V = undefined | string>(
+export const useStyles = <T extends object, V = undefined | string>(
   styleName: string,
   typeName?: V,
-  customTokens?: object
+  customTokens?: Partial<T>
 ): T => {
   const theme = useTheme();
   const style = theme[styleName];
@@ -21,7 +21,7 @@ export const useStyles = <T, V = undefined | string>(
   if (styleName !== undefined && typeName !== undefined) {
     if (style?.[typeName]) {
       if (customTokens) {
-        styles = mergeObjects(structuredClone(style[typeName]), customTokens);
+        styles = mergeObjects<T, Partial<T>>(structuredClone(style[typeName]), customTokens);
       } else {
         styles = style[typeName];
       }

src/hooks/useStyles/useStylesV2.tsx

@@ -2,19 +2,19 @@ import { useTheme } from 'styled-components';
 
 import { mergeObjects } from '@/utils';
 
-interface IUseStyles<V> {
+interface IUseStyles<T, V> {
   styleName: string;
   variantName?: V;
-  customTokens?: object;
+  customTokens?: Partial<T>;
   isOptional?: boolean;
 }
 
-export const useStylesV2 = <T, V = undefined | string>({
+export const useStylesV2 = <T extends object, V = undefined | string>({
   styleName,
   variantName,
   customTokens,
   isOptional,
-}: IUseStyles<V>): T | undefined => {
+}: IUseStyles<T, V>): T | undefined => {
   const theme = useTheme();
   if (styleName in theme) {
     const style = theme[styleName];
@@ -23,7 +23,7 @@ export const useStylesV2 = <T, V = undefined | string>({
       return style as T;
     } else if ((variantName as string) in style) {
       if (customTokens) {
-        return mergeObjects(structuredClone(style[variantName]), customTokens) as T;
+        return mergeObjects<T, Partial<T>>(structuredClone(style[variantName]), customTokens) as T;
       }
       return style[variantName];
     }

src/utils/mergeObjectStyles/mergeObjectStyles.ts

@@ -1,4 +1,8 @@
-export const mergeObjectsStyles = (target: object, source: object): object => {
+export const mergeObjectsStyles = <T extends object, S extends object>(
+  target: T,
+  source: S
+): Partial<T & S> => {
+  // This condition is necessary to avoid the error: "Maximum call stack size exceeded"
   if (typeof target !== 'object' || typeof source !== 'object') {
     return source;
   }
@@ -7,9 +11,12 @@ export const mergeObjectsStyles = (target: object, source: object): object => {
   for (const key in source) {
     if (Object.prototype.hasOwnProperty.call(source, key)) {
       if (Object.prototype.hasOwnProperty.call(target, key)) {
-        mergedObject[key] = mergeObjectsStyles(target[key], source[key]);
+        mergedObject[key as string] = mergeObjectsStyles<T, S>(
+          target[key as string] as T,
+          source[key] as S
+        );
       } else {
-        mergedObject[key] = source[key];
+        mergedObject[key as string] = source[key];
       }
     }
   }

src/utils/mergeObjects/__tests__/mergeObjects.test.ts

@@ -2,31 +2,46 @@ import { mergeObjects } from '../mergeObjects';
 
 describe('mergeObjects', () => {
   it('should merge multiple objects into one', () => {
-    const target = { a: 1 };
-    const source1 = { b: 2 };
-    const source2 = { c: 3 };
+    type TestObjectA = { a: number };
+    type TestObjectB = { b: number };
+    type TestObjectC = { c: number };
+    type TestObjectBC = Partial<TestObjectB & TestObjectC>;
 
-    const result = mergeObjects(target, source1, source2);
+    const target: TestObjectA = { a: 1 };
+    const source1: TestObjectB = { b: 2 };
+    const source2: TestObjectC = { c: 3 };
+
+    const result = mergeObjects<TestObjectA, TestObjectBC>(target, source1, source2);
 
     expect(result).toEqual({ a: 1, b: 2, c: 3 });
   });
 
   it('should overwrite properties with the same key', () => {
+    type TestObject = { a: number; b: number };
+    type TestObjectB = { b: number };
+    type TestObjectC = { c: number };
+    type TestObjectBC = Partial<TestObjectB & TestObjectC>;
+
     const target = { a: 1, b: 2 };
     const source1 = { b: 3 };
     const source2 = { c: 4 };
 
-    const result = mergeObjects(target, source1, source2);
+    const result = mergeObjects<TestObject, TestObjectBC>(target, source1, source2);
 
     expect(result).toEqual({ a: 1, b: 3, c: 4 });
   });
 
   it('should handle nested objects', () => {
+    type TestObject = { a: { b: number } };
+    type TestObjectTwo = { a: { c: number } };
+    type TestObjectD = { d: number };
+    type TestObjectTwoD = Partial<TestObjectTwo & TestObjectD>;
+
     const target = { a: { b: 1 } };
     const source1 = { a: { c: 2 } };
     const source2 = { d: 3 };
 
-    const result = mergeObjects(target, source1, source2);
+    const result = mergeObjects<TestObject, TestObjectTwoD>(target, source1, source2);
 
     expect(result).toEqual({ a: { b: 1, c: 2 }, d: 3 });
   });

src/utils/mergeObjects/mergeObjects.ts

@@ -1,6 +1,11 @@
+type MergeValues<S> = S[Extract<keyof S, string>];
+type ParsingObject<S> = MergeValues<S> extends object ? MergeValues<S> : never;
 /* eslint-disable complexity */
-export const mergeObjects = (target: object, ...sources: object[]): object => {
-  const result = Array.isArray(target) ? [] : { ...target };
+export const mergeObjects = <T extends object, S extends object>(
+  target: T,
+  ...sources: S[]
+): Partial<T & S> => {
+  const result = Array.isArray(target) ? ([] as unknown as T[]) : { ...target };
 
   for (const source of sources) {
     for (const key in source) {
@@ -10,17 +15,22 @@ export const mergeObjects = (target: object, ...sources: object[]): object => {
           if (
             // eslint-disable-next-line no-prototype-builtins
             !result.hasOwnProperty(key) ||
-            typeof result[key] !== 'object' ||
-            result[key] === null
+            typeof (result as S)[key] !== 'object' ||
+            (result as S)[key] === null
           ) {
-            result[key] = Array.isArray(source[key]) ? [] : {};
+            (result as S)[key] = Array.isArray(source[key])
+              ? ([] as MergeValues<S>)
+              : ({} as MergeValues<S>);
           }
-          result[key] = mergeObjects(result[key], source[key]);
+          (result as S)[key] = mergeObjects<ParsingObject<S>, S>(
+            (result as S)[key] as ParsingObject<S>,
+            source[key] as S
+          ) as MergeValues<S>;
         } else {
-          result[key] = source[key];
+          (result as S)[key] = source[key];
         }
       }
     }
   }
-  return result;
+  return result as Partial<T & S>;
 };