Nesting objects within arrays using Typescript Generics

Question

Nesting objects within arrays using Typescript Generics

Hello, I am currently attempting to assign the correct type to an object with nested values.

Here is a link to the code in the sandbox: https://codesandbox.io/s/0tftsf

interface Product {
  name: string,
  id: number
  productList?:ProductItem[]
}

interface ProductItem { 
  color: string, 
  size: number 
 }


type IValidation<T> = {
  field: keyof T
  nestedValidations?: IValidation<
    Pick<
      T,
      {
        [K in keyof T]-?: T[K] extends object ? K : never
      }[keyof T]
      >
    >[] // THIS IS CRITICAL FOR MY QUESTION!
  validators?: (any | any | any)[]
}

export async function validateIt<T>(payload: T, validations: IValidation<T>[]): Promise<
  Partial<{
    [key in keyof T]: string[]
  }>
  > { 
    return Promise.resolve(payload);
  }

const product: Product = {
  id: 1,
  name: 'playstation',
  productList: [{
    color: 'red',
    size: 32
    }
  ]
}

const test = validateIt<Product>(product, [
  {
    field: "productList",
    validators: [],
    nestedValidations: [
      {
        field: 'color',
        validators: []
      }
    ]
  }
])

I am encountering a type error and trying to determine the correct type for the nestedValidations property, which should align with the interface Product.

https://i.sstatic.net/FayYJ.png

javascript typescript generics

Answer 1

Answer №1

Using Typescript Version 3.7 and Above

To accomplish this task, you can utilize the in keyword along with keyof. Essentially, you will be "generating" all potential types for each key, and TypeScript will identify the matching one.

type IValidation<T> = T extends Array<infer R> ? IValidation<R> : T extends object ? {
    [K in keyof T]: {
        field: K
        nestedValidations?: IValidation<T[K]>[]
        validators?: (any | any | any)[]
    }
}[keyof T] : never

Try it out here

This approach is not compatible with older versions of TypeScript as they do not support recursive types. More information available here.

Answer 2

Using Typescript Version 3.7 and Above

To accomplish this task, you can utilize the in keyword along with keyof. Essentially, you will be "generating" all potential types for each key, and TypeScript will identify the matching one.

type IValidation<T> = T extends Array<infer R> ? IValidation<R> : T extends object ? {
    [K in keyof T]: {
        field: K
        nestedValidations?: IValidation<T[K]>[]
        validators?: (any | any | any)[]
    }
}[keyof T] : never

Try it out here

This approach is not compatible with older versions of TypeScript as they do not support recursive types. More information available here.

Answer 3

Answer №2

Perhaps I don't have the full perspective, but it seems like you are aiming to accomplish this:

interface Product {
  name: string,
  id: number
}

type ValueOf<T> = T[keyof T]; // unnecessary

type IValidation<T> = {
  field: keyof T
  nestedValidations?: IValidation<T>[] // THIS IS CRUCIAL FOR THE QUESTION!
  validators?: (any | any | any)[]
}

export async function validateIt<T>(payload: T, validations: IValidation<T>[]): Promise<
  Partial<{
    [key in keyof T]: string[]
  }>
  > { 
    return Promise.resolve(payload);
  }

const product: Product = {
  id: 1,
  name: 'playstation'
}

const test = validateIt<Product>(product, [
  {
    field: "id",
    validators: [],
    nestedValidations: [
      {
        field: "name",
        validators: []
      }
    ]
  }
])

Experiment here: Typescript Playground

Please bear in mind that I needed to simplify your data structure as I am not familiar with how 'IRequiredValidator' is defined.

Essentially, we transition from

nestedValidations?: IValidation<ValueOf<T>>[]

to

nestedValidations?: IValidation<T>[]

because you intend to extract the keys of T and not the keys of (keys of T). This way, it resolves to all properties of the type assigned to a property of T.

Answer 4

Perhaps I don't have the full perspective, but it seems like you are aiming to accomplish this:

interface Product {
  name: string,
  id: number
}

type ValueOf<T> = T[keyof T]; // unnecessary

type IValidation<T> = {
  field: keyof T
  nestedValidations?: IValidation<T>[] // THIS IS CRUCIAL FOR THE QUESTION!
  validators?: (any | any | any)[]
}

export async function validateIt<T>(payload: T, validations: IValidation<T>[]): Promise<
  Partial<{
    [key in keyof T]: string[]
  }>
  > { 
    return Promise.resolve(payload);
  }

const product: Product = {
  id: 1,
  name: 'playstation'
}

const test = validateIt<Product>(product, [
  {
    field: "id",
    validators: [],
    nestedValidations: [
      {
        field: "name",
        validators: []
      }
    ]
  }
])

Experiment here: Typescript Playground

Please bear in mind that I needed to simplify your data structure as I am not familiar with how 'IRequiredValidator' is defined.

Essentially, we transition from

nestedValidations?: IValidation<ValueOf<T>>[]

to

nestedValidations?: IValidation<T>[]

because you intend to extract the keys of T and not the keys of (keys of T). This way, it resolves to all properties of the type assigned to a property of T.

Nesting objects within arrays using Typescript Generics

Answer №1

Using Typescript Version 3.7 and Above

This approach is not compatible with older versions of TypeScript as they do not support recursive types. More information available here.

Answer №2

Similar questions

Are all components in Next.js considered client components by default?

Error: webpack is failing to load the style and CSS loaders

Creating a universal parent constructor that can take in an object with keys specific to each child class

What is the best way to swap out every instance of an array?

Tips for extracting specific JSON response data from an array in TypeScript

Exploring the concept of multiple inheritance using ES6 classes

Leveraging the power of LocalStorage in Ionic 2

Employing state management in React to toggle the sidebar

How you can fix the issue of the "Element not visible" error occurring specifically for one element within the popup

Implementing AngularJS JQuery Datatables Directive for Displaying Multiple Data Tables within a Single View

Prevent a React component from unnecessarily re-rendering after a property has been set

Return to a mention of a tree reference

Please input the number backwards into the designated text field

Error: The window object is not found in this context when initializing the Commerce module from the commerce.export.js file located in the node_modules folder within the @chec

A step-by-step guide on creating a chainable command in Cypress

A guide to managing Ajax in functional components in React without using classes

Enhance hover effects with JQuery through dynamic mouse movements

Are strings in an array being truncated by Firebug console log?

Error encountered: MongoDB cast exception - nested subdocument

Is there a way to access an object within another object without the need to use a function