Creating object interfaces in TypeScript dynamically based on function parameters

Question

Creating object interfaces in TypeScript dynamically based on function parameters

I'm currently working on a small project that involves creating lists of products in a certain format. For example:

let products = createList(
   new Product('product1'),
   new Product('product2')
)

When it comes to accessing a specific product, such as product1, I typically use products.list['product1'] and then proceed with further actions. Each product within the list is designed with a name property that corresponds to the first parameter passed in the constructor. Right now, products.list utilizes a simple string index signature. What I really want to achieve is for intellisense to suggest properties like product1, product2, and so forth for the list object. This functionality would be akin to how express handles request parameters:

https://i.stack.imgur.com/d0p4d.png

In my quest to address this issue, I delved into express' type declarations and extensively reviewed TypeScript documentation on utility types, particularly focusing on the Record type. Despite this effort, I still couldn't quite grasp the solution. It's possible that I may have been searching for the wrong information. Therefore, I would greatly appreciate any guidance in directing me towards the proper documentation.

typescript types

Answer 1

Answer №1

In order for this approach to be successful, the Product class must have a generic defined for the string literal type of the name property. Without this, the compiler would only recognize the name property as a string, resulting in the loss of strong typing possibilities for the keys in the output of createList(). Assuming Product is structured like below:

class Product<K extends string> {
    constructor(public name: K) { }
    size = 123;
    cost = 456;
}

(Note: This definition simplifies things quite a bit, and currently, Product<K> is covariant in K. This means that a union of different Product types can be assigned to a single Product type. For example,

Product<"product1"> | Product<"product2">

could be assigned to

Product<"product1" | "product2">

. The code relies on this assignment. If Product<K> were more complex and became invariant in K, this union assignment would fail. It's possible to work around this issue by adjusting the code, but we won't delve into that further here.)

Now, let's define createList():

function createList<K extends string>(...products: Product<K>[]) {
    return products.reduce(
      (accumulator, product) => ({ ...accumulator, [product.name]: product }), 
      {} as { [P in K]: Product<P> }
    );
}

The function takes multiple arguments of type Product<K> for some K, which will comprise the union of all the name properties from individual Product instances. We use the reduce() method of the products array to construct the desired object, assigning each product p with a property using key p.name and value p.

The return type of createList() is {[P in K]: Product<P>}, a mapped type consisting of one property P for every member within the K union. Each property with key P is assigned the type Product<P>. Since the compiler may not fully comprehend or infer that reduce() generates a value of this type, a type assertion is used to assume that the initial empty value passed has that type.

Let's verify if it works:

let products = createList(
    new Product('product1'),
    new Product('product2')
)

/*let products: {
    product1: Product<"product1">;
    product2: Product<"product2">;
} */

Seems like it's working!

Playground link to code

Answer 2

In order for this approach to be successful, the Product class must have a generic defined for the string literal type of the name property. Without this, the compiler would only recognize the name property as a string, resulting in the loss of strong typing possibilities for the keys in the output of createList(). Assuming Product is structured like below:

class Product<K extends string> {
    constructor(public name: K) { }
    size = 123;
    cost = 456;
}

(Note: This definition simplifies things quite a bit, and currently, Product<K> is covariant in K. This means that a union of different Product types can be assigned to a single Product type. For example,

Product<"product1"> | Product<"product2">

could be assigned to

Product<"product1" | "product2">

. The code relies on this assignment. If Product<K> were more complex and became invariant in K, this union assignment would fail. It's possible to work around this issue by adjusting the code, but we won't delve into that further here.)

Now, let's define createList():

function createList<K extends string>(...products: Product<K>[]) {
    return products.reduce(
      (accumulator, product) => ({ ...accumulator, [product.name]: product }), 
      {} as { [P in K]: Product<P> }
    );
}

The function takes multiple arguments of type Product<K> for some K, which will comprise the union of all the name properties from individual Product instances. We use the reduce() method of the products array to construct the desired object, assigning each product p with a property using key p.name and value p.

The return type of createList() is {[P in K]: Product<P>}, a mapped type consisting of one property P for every member within the K union. Each property with key P is assigned the type Product<P>. Since the compiler may not fully comprehend or infer that reduce() generates a value of this type, a type assertion is used to assume that the initial empty value passed has that type.

Let's verify if it works:

let products = createList(
    new Product('product1'),
    new Product('product2')
)

/*let products: {
    product1: Product<"product1">;
    product2: Product<"product2">;
} */

Seems like it's working!

Playground link to code

Creating object interfaces in TypeScript dynamically based on function parameters

Answer №1

Similar questions

Why is it possible to assign a variable holding a char array to a pointer in C, but attempting to take the address of that same pointer is not allowed?

Using React with Typescript to display components generated from the `map` function

React with Typescript - Type discrepancies found in Third Party Library

Is it considered an anti-pattern in TypeScript to utilize BehaviorSubject for class or object properties?

Storing a byte array in a local file using JavaScript: A Step-by-Step Guide

The Angular test spy is failing to be invoked

Is it possible to create a function that only accepts a union type if it includes a specific subtype within it?

Angular 11 now includes the ability to implement lazy loading for modules

Angular 6 - The requested resource does not have the necessary 'Access-Control-Allow-Origin' header

Struggling with importing aliases in TypeScript for shadcn-ui library

Angular 6: Issues with API Get Method not executing when an integer value is passed with an empty string

Exploring TypeScript: Implementing a runtime data mapping in place of an interface

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Add integer to an array of strings

The revalidation process in react-hook-form doesn't seem to initiate

Changing the function to operate asynchronously

Type of Data for Material UI's Selection Component

TypeScript - Issue with generic function's return type

Angular has the ability to round numbers to the nearest integer using a pipe

Images with spaces in their names are failing to load in React Native