Typescript objects may contain keys that are dependent on certain parameters

Question

Typescript objects may contain keys that are dependent on certain parameters

I have a challenge with constructing an object that requires querying multiple database tables, resulting in a time-consuming process. To address this issue, clients of the object need to specify which specific parts they require. For example, let's consider a User object that may sometimes include Purchases and sometimes Friends. Currently, I am utilizing optional properties for this purpose:

interface User {
  id: number
  purchases?: Purchase[]
  friends?: Friend[]
  friendsOfFriends?: Friend[]
}

Clients requesting a User can use getUser(['purchases']) to retrieve a user where the purchases key is defined.

The downside is that whenever I utilize purchases, friends, or friendsOfFriends, I must inform Typescript about the existence of these types (e.g., user.purchases![0] or

user.purchases && user.purchases[0]

), which can be cumbersome.

Is there a way in Typescript to indicate that the parameters passed in determine which keys are present in the returned value? For instance:

getUser([]) results in an {id: number}
getUser(['purchases']) results in an
```
{id: number; purchases: Purchase[]}
```
getUser(['network']) yields an
```
{id: number; friends: Friend[]; friendsOfFriends: Friend[]}
```
-- notice how network retrieves friends and friendsOfFriends

getUser(['purchases', 'network'])

gives us an

{id: number; purchases: Purchase[]; friends: Friend[]; friendsOfFriends: Friend[]}

In actual scenarios, there are more than two possible keys to include, and creating numerous overloaded types is not desirable.

Is it feasible to achieve this functionality in Typescript?

Appreciate any guidance!

typescript

Answer 1

Answer №1

I will let you handle the implementation of getUser(), as well as convincing the compiler that your implementation aligns with the type definition. Essentially, I am treating getUser() as if it exists in pure JavaScript land, and my role is to define its type so that the compiler can correctly process calls to it.

To start, the compiler needs a mechanism to understand the relationship between arguments passed to getUser() and which sets of keys from User they correspond to. Here's an example of how this mapping might look like:

interface KeyMap {
    purchases: "purchases",
    network: "friends" | "friendsOfFriends"
}

With this information, we need to instruct the compiler on how to calculate UserType<K> for a given set of keys K based on KeyMap. One possible way to achieve this is:

type UserType<K extends keyof KeyMap> =
    User & Pick<Required<User>, KeyMap[K]> extends 
    infer O ? { [P in keyof O]: O[P] } : never;

The crucial part here is

User & Pick<Required<User>, KeyMap[K]>

: This ensures that the result is always a User by including it in an intersection. Additionally, we extract the properties pointed out by K from Required<User> using Pick. The Required<T> type converts optional keys into required ones.

The section starting with extends infer O... essentially leverages conditional type inference to transform the complex type User & Pick... into a clear object type with explicit properties. If you prefer seeing

User & Pick<Required<User>, "purchases">

instead of the object types below, you can remove everything after extends.

Finally, the typing for the getUser() function appears as follows:

declare function getUser<K extends keyof KeyMap>(keys: K[]): UserType<K>;

This function takes an array of KeyMap keys and returns the corresponding UserType<K>.

...

Answer 2

I will let you handle the implementation of getUser(), as well as convincing the compiler that your implementation aligns with the type definition. Essentially, I am treating getUser() as if it exists in pure JavaScript land, and my role is to define its type so that the compiler can correctly process calls to it.

To start, the compiler needs a mechanism to understand the relationship between arguments passed to getUser() and which sets of keys from User they correspond to. Here's an example of how this mapping might look like:

interface KeyMap {
    purchases: "purchases",
    network: "friends" | "friendsOfFriends"
}

With this information, we need to instruct the compiler on how to calculate UserType<K> for a given set of keys K based on KeyMap. One possible way to achieve this is:

type UserType<K extends keyof KeyMap> =
    User & Pick<Required<User>, KeyMap[K]> extends 
    infer O ? { [P in keyof O]: O[P] } : never;

The crucial part here is

User & Pick<Required<User>, KeyMap[K]>

: This ensures that the result is always a User by including it in an intersection. Additionally, we extract the properties pointed out by K from Required<User> using Pick. The Required<T> type converts optional keys into required ones.

The section starting with extends infer O... essentially leverages conditional type inference to transform the complex type User & Pick... into a clear object type with explicit properties. If you prefer seeing

User & Pick<Required<User>, "purchases">

instead of the object types below, you can remove everything after extends.

Finally, the typing for the getUser() function appears as follows:

declare function getUser<K extends keyof KeyMap>(keys: K[]): UserType<K>;

This function takes an array of KeyMap keys and returns the corresponding UserType<K>.

...

Typescript objects may contain keys that are dependent on certain parameters

Answer №1

Similar questions

Encountering a TypeScript error while trying to pass the myDecorator function as a decorate prop to React

Retrieving information from a .json file using TypeScript

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

Stack the labels of separate datasets on top of each bar in a bar chart using Chartjs: How can this be achieved?

Issue with Angular 6 where data is not binding to the UI on initialization

Using TypeScript to define generic types for classes, method parameters, and method return types

Middleware fails to execute on routing in Nextjs 13.4 application

This component is not compatible with JSX syntax and cannot be used as a JSX component. The type '() => Element' is not suitable for JSX element rendering

Is there a way to replicate the tree structure of an array of objects into a different one while modifying the copied attributes?

Typescript Nested Class (also known as Angular Private Inner Interface)

Next.js React Server Components Problem - "ReactServerComponentsIssue"

What are the steps to troubleshoot a Node Package Manager library in Visual Studio Code?

Tips for preventing circular dependencies in JavaScript/TypeScript

Vue-i18n does not offer a default export option

Using Typescript: Generate keys in function return depending on parameter

Struggling to locate the module in React Native with TypeScript configuration

I am sorry, but it seems like there is an issue with the definition of global in

What seems to be the issue with the useState hook in my React application - is it not functioning as

How to update the page title in React TypeScript 16.8 without using Helmet

Attempting to categorize JSON object elements into separate arrays dynamically depending on their values