Simplify a user interface

Question

Simplify a user interface

I have a scenario where I need to dynamically derive the keys/fields of my type based on a generic type.

For instance:

Here are the container interfaces

export interface IUser {
    id: BigInt;
    name: string;
    balance: number;
    address: Address;
}
export interface Address {
    street: string;
    city: string;
    zipcode: number;
    tags: string[];
}

I would like to create a type that looks like this

const matcher: Matcher<IUser> = {
  id: 1
}

This can be achieved using the following implementation of Matcher

export type Matcher<T> = {
    [K in keyof T]: (number | string | boolean)
}

However, for a more complex situation like

const deepMatcher: Matcher<IUser> = {
  id: 1,
  user.address.city: 'San Francisco'
}

How can I modify my model (Matcher) to accommodate this use-case?

typescript typescript-generics

Answer 1

Answer №1

Disclaimer: There are numerous edge cases with these types of problems. While this solution works for the provided example, it may not handle optional properties or unions well. Additionally, paths of objects inside arrays are not included in this solution.

This solution can be divided into two main parts:

Firstly, we define a type that takes a type T and generates a union of all paths within T.

type AllPaths<T, P extends string = ""> = {
    [K in keyof T]: T[K] extends object 
      ? T[K] extends any[] 
        ? `${P}${K & string}` 
        : AllPaths<T[K], `${P}${K & string}.`> extends infer O 
          ? `${O & string}` | `${P}${K & string}`
          : never 
        : `${P}${K & string}`
}[keyof T]

AllPaths is a type that utilizes recursion to map over all properties of T and handle different scenarios based on the type of each property.

In the next step, we need a type that can extract the correct type for a given path.

type PathToType<T, P extends string> = P extends keyof T
  ? T[P]
  : P extends `${infer L}.${infer R}` 
    ? L extends keyof T
      ? PathToType<T[L], R>
      : never
    : never 

type T0 = PathToType<IUser, "address.street">
// type T0 = string

This type also uses recursion to handle the different possible scenarios when extracting types based on paths.

Finally, both types are used within the Matcher type.

type Matcher<T> = Partial<{
    [K in AllPaths<T>]: PathToType<T, K & string>
}>

The Matcher type utilizes AllPaths to generate keys and PathToType to fetch the corresponding type for each key in the resulting object.

You can test the types in the TypeScript Playground here.

Answer 2

Disclaimer: There are numerous edge cases with these types of problems. While this solution works for the provided example, it may not handle optional properties or unions well. Additionally, paths of objects inside arrays are not included in this solution.

This solution can be divided into two main parts:

Firstly, we define a type that takes a type T and generates a union of all paths within T.

type AllPaths<T, P extends string = ""> = {
    [K in keyof T]: T[K] extends object 
      ? T[K] extends any[] 
        ? `${P}${K & string}` 
        : AllPaths<T[K], `${P}${K & string}.`> extends infer O 
          ? `${O & string}` | `${P}${K & string}`
          : never 
        : `${P}${K & string}`
}[keyof T]

AllPaths is a type that utilizes recursion to map over all properties of T and handle different scenarios based on the type of each property.

In the next step, we need a type that can extract the correct type for a given path.

type PathToType<T, P extends string> = P extends keyof T
  ? T[P]
  : P extends `${infer L}.${infer R}` 
    ? L extends keyof T
      ? PathToType<T[L], R>
      : never
    : never 

type T0 = PathToType<IUser, "address.street">
// type T0 = string

This type also uses recursion to handle the different possible scenarios when extracting types based on paths.

Finally, both types are used within the Matcher type.

type Matcher<T> = Partial<{
    [K in AllPaths<T>]: PathToType<T, K & string>
}>

The Matcher type utilizes AllPaths to generate keys and PathToType to fetch the corresponding type for each key in the resulting object.

You can test the types in the TypeScript Playground here.

Simplify a user interface

Answer №1

Similar questions

What is the reason behind capitalizing Angular CLI class file imports?

Converting an array of arguments into tuples within the range of <T extends Tuple> is denoted by [T, (...args: NonNullArray<T>) => any], where each tuple represents the argument of a

Is there a way to define a type once and then use it for both a function and a component in React using TypeScript?

find all the possible combinations of elements from multiple arrays

Transferring data to a different module

Using a union type annotation when passing into knex will result in the return of an unspecified

When transmitting information to the server, the browser initiates four requests

Troubleshooting the issue with mocking the useTranslation function for i18n in JEST

Traverse the elements of a BehaviorSubject named Layer_Template

Combining TypeScript and ReactJS with RequireJS: A guide to importing react-dom in TypeScript

Arranging the properties of an object following the reduction process

Angular functions are self-contained and cannot access anything external to their own scope

Solving the issue of interconnected promises in Angular services

Using res.locals with TypeScript in Next.js and Express

Incorporate an HTML span element with an onclick function bound in Angular framework

Maximize the performance of displaying images

Using a click event to target the next div and apply a CSS class using Typescript

Accurately Showing Values of Observable Objects

Using Angular, you can effortlessly inject elements into the editable div from any location on the page

Typescript does not produce unused members