Flatten object with custom keys in Typescript

by

First, if you want to have any chance of the compiler realizing that Type is "red" | "green" as opposed to string, we have to make sure that myObjct‘s type includes these literal types. The easy way to do that is with a const assertion:

const myObject = {
  names: {
    title: 'red',
    subtitle: 'green'
  },
} as const;

Next, your flatten() function has a type that is only barely representable in TypeScript 4.1+. I might write it like this, using an answer to a similar question:

type Flatten<T extends object> = object extends T ? object : {
    [K in keyof T]-?: (x: NonNullable<T[K]> extends infer V ? V extends object ?
        V extends readonly any[] ? Pick<T, K> : Flatten<V> extends infer FV ? ({
            [P in keyof FV as `${Extract<K, string | number>}.${Extract<P, string | number>}`]:
            FV[P] }) : never : Pick<T, K> : never
    ) => void } extends Record<keyof T, (y: infer O) => void> ?
    O extends infer U ? { [K in keyof O]: O[K] } : never : never

const flatten = <T extends object>(obj: T): Flatten<T> => { /* impl */ }

It uses recursive conditional types, template literal types, and key remapping in mapped types to recursively walk down through all the properties and concatenate keys together with . in between. I have no idea if this particular type function will work for all the use cases of flatten(), and I wouldn’t dare to pretend that it doesn’t have demons lurking in it.

If I use that signature, and call flatten(myObject) with the above const-asserted myObject, you get this:

const flattenedMyObject = flatten(myObject);
/* const flattenedMyObject: {
    readonly "names.title": "red";
    readonly "names.subtitle": "green";
} */

Hooray! And this is enough information for Type to be "red" | "green":

const returned = [...Object.values(flatten(myObject))] as const
type Type = typeof returned[number] // "red" | "green"

Also hooray.

I suppose if you don’t really care about tracking the key names, you can simplify the flatten() type signature considerably by returning something with a string index signature:

type DeepValueOf<T> = object extends T ? object :
    T extends object ? DeepValueOf<
        T[Extract<keyof T, T extends readonly any[] ? number : unknown>]
    > : T

const flatten = <T extends object>(obj: T): { [k: string]: DeepValueOf<T> } => {
    /* impl */ }

which produces

const flattenedMyObject = flatten(myObject);
/* const flattenedMyObject: {
   [k: string]: "green" | "red";
 } */

and eventually

const returned = [...Object.values(flatten(myObject))] as const
type Type = typeof returned[number] // "red" | "green"

I’m less worried about DeepValueOf than I am about Flatten, but I would be surprised if there aren’t some edge cases. So you’d need to really test before using it in any sort of production code.

Playground link to code

More Related Contents:

  1. ‘unknown’ vs. ‘any’
  2. Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index
  3. TypeScript function overloading
  4. How can I see the full expanded contract of a Typescript type?
  5. typescript interface require one of two properties to exist
  6. Typescript: check if a type is a union
  7. How do you produce a .d.ts “typings” definition file from an existing JavaScript library?
  8. Typescript Interface – Possible to make “one or the other” properties required?
  9. Forcing excess-property checking on variable passed to TypeScript function
  10. Why can Typescript not figure out the type in my code?
  11. How to overwrite incorrect TypeScript type definition installed via @types/package
  12. TypeScript TS7015 error when accessing an enum using a string type parameter
  13. Property ‘includes’ does not exist on type ‘string[]’
  14. Typescript: Cannot use import statement outside a module
  15. Angular2 – Share data between components using services
  16. ‘this’ implicitly has type ‘any’ because it does not have a type annotation
  17. TypeScript class implements class with private functions
  18. how to debug typescript files in visual studio code
  19. Is there a way to create nominal types in TypeScript that extend primitive types?
  20. Typescript: Retrieve element type information from array type
  21. How should I use @types with TypeScript 2
  22. TypeScript interfaces not enforcing properties when an object is assigned
  23. Can I reuse the parameter definition of a function in Typescript?
  24. Iterable cannot confirm generic T in function
  25. TypeScript empty object for a typed variable
  26. What does a TypeScript index signature actually mean?
  27. Why does a Typescript type conditional on `T extends undefined`, with T instantiated with `boolean`, resolve T to `never`?
  28. What exactly $event object do in Angular 2?
  29. new Typescript “satisfies” operator
  30. Narrowing a return type from a generic, discriminated union in TypeScript

Leave a Comment