{"id":1129,"date":"2023-03-24T07:00:00","date_gmt":"2023-03-24T06:00:00","guid":{"rendered":"https:\/\/greladesign.co\/blog\/?p=1129"},"modified":"2023-03-24T12:48:02","modified_gmt":"2023-03-24T11:48:02","slug":"typescript-add-typing-to-the-lodash-entries-helper","status":"publish","type":"post","link":"https:\/\/greladesign.co\/blog\/2023\/03\/24\/typescript-add-typing-to-the-lodash-entries-helper\/","title":{"rendered":"TypeScript: Add typing to the lodash entries helper"},"content":{"rendered":"\n

This is a followup post to the other one where we’ve added types to the lodash keys helper<\/a>. This time we will add types to the entries helper, which is an alias to the toPairs helper<\/a>, where we can also benefit from the proper typing of the returned list of key, value pairs. Let’s start with the same setup as in the other post:<\/p>\n\n\n\n\n\n\n

import<\/span> { entries } from<\/span> \"lodash\"<\/span>;\n<\/span><\/span>\n<\/span><\/span>\/\/ test object upon which we will call keys<\/span>\n<\/span><\/span>type<\/span> TObject = {\n<\/span><\/span>  fieldNum: number<\/span>;\n<\/span><\/span>  fieldStr: string<\/span>;\n<\/span><\/span>  fieldBln: boolean<\/span>;\n<\/span><\/span>  fieldArr: string<\/span>[];\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>const<\/span> o: TObject = {\n<\/span><\/span>  fieldNum: 42<\/span>,\n<\/span><\/span>  fieldStr: 'greladesign'<\/span>,\n<\/span><\/span>  fieldBln: true<\/span>,\n<\/span><\/span>  fieldArr: [\"a\"<\/span>, \"b\"<\/span>, \"c\"<\/span>]\n<\/span><\/span>};\n<\/span><\/span>\n<\/span><\/span>\/\/ tooltip will show: const entryPairs: [string, string | number | boolean | string[]][]<\/span>\n<\/span><\/span>const<\/span> entryPairs = entries(o);\n<\/span><\/span>\n<\/span><\/span>\/\/<\/span>\n<\/span><\/span>entryPairs.forEach((pair \/* : [string, string | number | boolean | string[]] *\/<\/span>): void<\/span> =><\/span> {\n<\/span><\/span>  \/\/ You have lost the information about keys of the object, <\/span>\n<\/span><\/span>  \/\/ TypeScript will no longer be able to verify field for you<\/span>\n<\/span><\/span>  if<\/span> (pair[0<\/span>] === 'fieldBoolean'<\/span>) { \/\/ TS will accept this incorrect field name<\/span>\n<\/span><\/span>    const<\/span> flag = pair[1<\/span>] \/\/ TS will use a union of all value types it found on object<\/span>\n<\/span><\/span>    \/\/ which is string, string | number | boolean | string[]<\/span>\n<\/span><\/span>  }\n<\/span><\/span>})\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Sorting out the type of pair[0]<\/code> is fairly simple to resolve:<\/p>\n\n\n
\/\/ add following to your typings e.g. lodash-override.d.ts<\/span>\n<\/span><\/span>export {};\n<\/span><\/span>\n<\/span><\/span>declare<\/span> module 'lodash'<\/span> {\n<\/span><\/span>  interface<\/span> LoDashStatic<\/span> <\/span>{\n<\/span><\/span>    toPairs<O, K extends keyof O = keyof O>(object?: O): [K, O[K]][];\n<\/span><\/span>    entries<O, K extends keyof O = keyof O>(object?: O): [K, O[K]][];\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
This helps a bit, keys are correctly picked up from the object<\/p>\n\n\n
\/\/ tooltip will now show: const entryPairs: [keyof TObject, string | number | boolean | string[]][]<\/span>\n<\/span><\/span>const<\/span> entryPairs = entries(o); \n<\/span><\/span>\n<\/span><\/span>\/\/<\/span>\n<\/span><\/span>entryPairs.forEach((pair \/* : [keyof TObject, string | number | boolean | string[]] *\/<\/span>): void<\/span> =><\/span> {\n<\/span><\/span>  \/\/ TS will now correctly identify this as an error<\/span>\n<\/span><\/span>  \/\/ if (pair[0] === 'fieldBoolean'){ <\/span>\n<\/span><\/span>  \/\/ After correcting the field name we're good<\/span>\n<\/span><\/span>  if<\/span> (pair[0<\/span>] === 'fieldBln'<\/span>) {\n<\/span><\/span>    const<\/span> flag = pair[1<\/span>] \/\/ This still is a union of all value types<\/span>\n<\/span><\/span>  }\n<\/span><\/span>})\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
The problem is still with the value of the pair. TypeScript doesnt know how to map it and it takes all of them as union. We need to let TS know how to infer the type by the used key. 

Let’s prepare a helper type that will produce correctly typed tuple.<\/p>\n\n\n
type<\/span> TTuple<O> = {\n<\/span><\/span>  \/* map the possible tuples against object's field *\/<\/span>\n<\/span><\/span>  [Field in<\/span> keyof O]: [field: Field, value: O[Field]];\n<\/span><\/span>}\/* select the proper tuple *\/<\/span>[keyof O];\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>const<\/span> tuple: TTuple<TObject> = ['fieldBln'<\/span>, true<\/span>];\n<\/span><\/span>\n<\/span><\/span>\/\/ tooltip over tuple shows const tuple: [field: \"fieldBln\", value: boolean]<\/span>\n<\/span><\/span>const<\/span> key = tuple[0<\/span>];\n<\/span><\/span>const<\/span> value = tuple[1<\/span>];\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
We have a helper that will select correct type for the value based on the selected field. 

Let’s adjust the lodash typing:<\/p>\n\n\n
\/\/ add following to your typings e.g. lodash-override.d.ts<\/span>\n<\/span><\/span>export<\/span> {};\n<\/span><\/span>\n<\/span><\/span>type<\/span> TTuple<O> = {\n<\/span><\/span>  [Field in<\/span> keyof O]: [field: Field, value: O[Field]];\n<\/span><\/span>}[keyof O];\n<\/span><\/span>\n<\/span><\/span>declare<\/span> module<\/span> 'lodash' {\n<\/span><\/span>  interface<\/span> LoDashStatic {\n<\/span><\/span>    toPairs<O>(object?: O): TTuple<O>[]; \n<\/span><\/span>    entries<O>(object?: O): TTuple<O>[]; \n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Now we’re all set and you can have properly typed entries. I hope you’ll find it useful.<\/p>\n\n\n\n
Source code<\/h3>\n\n\n\n