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

Cross-origin resource sharing (CORS) seems to be creating a barrier for the communication between my Angular

Integrating one service into another allows for seamless access to the imported service's properties and methods within an Angular

Angular 2 decorators grant access to private class members

Tips for centering an Angular mat prefix next to a label in a form field

Testing Playwright - accessing variables from the .env file

When defining properties/data in Vue mixins, the properties/data of the mixin are not accessible

The default value of components in Next.js

Unable to run unit tests on project using my custom React library

Using the css function within styled-components

There seems to be an issue with my React application that was built using Webpack 5 and compiled with TypeScript. The @tailwind directive is not functioning properly in the browser, and

How to use TypeScript variables in React applications

Tips for enabling custom object properties in Chrome DevTools

Navigating through JSON object using Angular 2's ngFor iterator

Using Typescript to extract elements from one array and create a new array

Retrieve information from a URL to transmit to a different page in NextJS using Typescript and AppRouter

Can a React.tsx project be developed as a standalone application?

Why does my Visual Studio Code always display "building" when I launch an extension?

Efficiently Updating Property Values in Objects Using TypeScript and Loops

Transform webservice data into TypeScript object format, ensuring mapping of objects from capital letters to camel case

Collaborate and apply coding principles across both Android and web platforms