TypeScript: Convert wp-utils package (#12247)

Author: spacedmonkey

packages/wp-utils/package.json

@@ -25,6 +25,8 @@
     "npm": ">= 7.3"
   },
   "type": "module",
-  "main": "./src/index.js",
+  "main": "./src/index.ts",
+  "types": "dist-types/index.d.ts",
+  "source": "src/index.ts",
   "dependencies": {}
 }

packages/wp-utils/src/bindToCallbacks.js renamed to packages/wp-utils/src/bindToCallbacks.ts

@@ -13,11 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const bindToCallbacks = (callbacks, config) => {
-  return Object.entries(callbacks).reduce((_callbacks, [name, callback]) => {
-    _callbacks[name] = callback.bind(null, config);
-    return _callbacks;
-  }, {});
-};
+
+function bindToCallbacks<T>(
+  callbacks: Record<string, (config: T) => unknown>,
+  config: T
+): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(callbacks).map(([name, callback]) => [
+      name,
+      callback.bind(null, config),
+    ])
+  );
+}
 
 export default bindToCallbacks;

packages/wp-utils/src/index.js renamed to packages/wp-utils/src/index.ts

@@ -17,10 +17,10 @@
  * Takes a string that is in snake case and returns the same
  * term in camel case.
  *
- * @param {string} string The key in snake case
- * @return {string} The key in camel case
+ * @param string The key in snake case
+ * @return The key in camel case
  */
-export function snakeToCamelCase(string = '') {
+export function snakeToCamelCase(string = ''): string {
   if (!string.includes('_') && !string.includes('-')) {
     return string;
   }
@@ -29,32 +29,46 @@ export function snakeToCamelCase(string = '') {
     .toLowerCase()
     .replace(
       /([a-z])([_|-][a-z])/g,
-      (_match, group1, group2) =>
+      (_match, group1: string, group2: string) =>
         group1 + group2.toUpperCase().replace('_', '').replace('-', '')
     );
 }
 
+type ObjectOrPrimitive = SnakeOrCamelCaseObject | unknown;
+
+interface SnakeOrCamelCaseObject {
+  [key: string]: ObjectOrPrimitive;
+}
+
+function isObject(obj: unknown) {
+  return obj && 'object' === typeof obj && !Array.isArray(obj);
+}
+
 /**
  * Transform a given object keys from snake case to camel case recursively.
  *
- * @param {Object} obj Object to be transformed.
- * @param {Object} ignore Array of keys to be ignored for camelcase.
- * @return {any} Transformed object.
+ * @param obj Object to be transformed.
+ * @param ignore Array of keys to be ignored for camelcase.
+ * @return Transformed object.
  */
-export function snakeToCamelCaseObjectKeys(obj, ignore = []) {
-  const isObject = (val) =>
-    val && 'object' === typeof val && !Array.isArray(val);
-
+export function snakeToCamelCaseObjectKeys(
+  obj: ObjectOrPrimitive,
+  ignore: string[] = []
+): ObjectOrPrimitive {
   if (!isObject(obj)) {
     return obj;
   }
 
-  return Object.entries(obj).reduce((transformedObject, [key, value]) => {
-    const camelCaseKey = snakeToCamelCase(key);
-    transformedObject[camelCaseKey] =
-      isObject(value) && !ignore.includes(key)
-        ? snakeToCamelCaseObjectKeys(value)
-        : value;
-    return transformedObject;
-  }, {});
+  return Object.fromEntries(
+    Object.entries(obj as SnakeOrCamelCaseObject).map(
+      ([key, value]: [string, ObjectOrPrimitive]) => {
+        return [
+          snakeToCamelCase(key),
+          isObject(value) && !ignore.includes(key)
+            ? snakeToCamelCaseObjectKeys(value)
+            : value,
+        ] as [string, SnakeOrCamelCaseObject];
+      }
+    )
+  );
 }

packages/wp-utils/src/snakeToCamelCase.js renamed to packages/wp-utils/src/snakeToCamelCase.ts

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.shared.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist-types"
+  },
+  "include": ["src/**/*"]
+}

packages/wp-utils/tsconfig.json

@@ -9,7 +9,8 @@
     { "path": "packages/tracking" },
     { "path": "packages/transform" },
     { "path": "packages/units" },
-    { "path": "packages/url" }
+    { "path": "packages/url" },
+    { "path": "packages/wp-utils" }
   ],
   "include": []
 }