Matching only the specified Records in an array of Typescript generic objects

Question

Matching only the specified Records in an array of Typescript generic objects

Check out this demo: https://tsplay.dev/Nnavaw

I am working with an array that has the following structure:

Array<{
      id?: string;
      text?: string;
      date?: Date;
    }>

This conflicts with the current implementation:

data: Array<Partial<Record<K, string>> & Partial<Record<H, string | number | null>>>

How can I inform Typescript that the Array may contain additional properties besides

Partial<Record<K, string>> & Partial<Record<H, string | number | null>>

?

If I try to pass an array with a different definition, it triggers this error message:

Type 'Date' is not assignable to type 'string | number | null | undefined'.

Here is the complete function for reference:

ifAlreadyExistsString<K extends PropertyKey, H extends PropertyKey>(
    data: Array<Partial<Record<K, string>> & Partial<Record<H, string | number | null>>>,
    key: K,
    value: string,
    idKey?: H,
    idValue?: string | number | null
  ): boolean {
    return (
      data.filter((item) => {
        // Check if the value exists in the data array
        if (item[key] && item[key]?.trim().toLowerCase() === value.trim().toLowerCase()) {
          // Verify if the id of the value matches the found entry
          // Matching ids means editing existing entry, while non-matching indicates duplicate.
          if (idKey && item[idKey] && idValue) {
            return !(item[idKey] === idValue);
          } else {
            // If no idKey is provided, then we have a duplicate entry.
            return true;
          }
        }

        return false;
      }).length !== 0
    );
  }

typescript typescript-generics

Answer 1

Answer №1

In the scenario where the idKey parameter is not provided, the compiler faces difficulty inferring H, resulting in undesired consequences. The ideal expectation is for H to default to never, ensuring that

Record<never, string | number | null>

equates to an empty object {}. This prevents any restrictions on the element type of data. Regrettably, the compiler currently utilizes the array type of data to deduce H, assuming it should be keyof (typeof data)[number], which leads to errors.

To rectify this issue, a workaround involves overloading the method with distinct call signatures based on the presence or absence of idKey. The solution is as follows:

// Call signature without idKey
ifAlreadyExistsString<K extends PropertyKey>(
  data: Array<Partial<Record<K, string>>>,
  key: K,
  value: string,
): boolean;

// Call signature with idKey
ifAlreadyExistsString<K extends PropertyKey, H extends PropertyKey>(
  data: Array<Partial<Record<K, string>> & Partial<Record<H, string | number | null>>>,
  key: K,
  value: string,
  idKey?: H,
  idValue?: string | number | null
): boolean;

// Implementation
ifAlreadyExistsString<K extends PropertyKey, H extends PropertyKey>(
  data: Array<Partial<Record<K, string>> & Partial<Record<H, string | number | null>>>,
  key: K,
  value: string,
  idKey?: H,
  idValue?: string | number | null
): boolean { /* implementation */ }

The above approach resolves the issue, allowing smooth execution of the function:

console.log(this.ifAlreadyExistsString(data, 'text', 'no text')); // Approve
/* AppComponent.ifAlreadyExistsString<"text">(
    data: Partial<Record<"text", string>>[], key: "text", value: string
  ): boolean (+1 overload) */

Alternatively, another strategy involves guiding the compiler to prevent inference of H from data and setting a default to never. To achieve this, you specify that H within the data type encounters non-inferential handling. Although there is an ongoing feature request for a dedicated syntax like NoInfer<H>, current TypeScript functionalities provide a workaround as illustrated below:

type NoInfer<T> = [T][T extends any ? 0 : never];

The implementation ensures that regardless of the input, NoInfer<T> eventually evaluates to T. By deferring the evaluation of T extends any ? 0 : never, inference obstacles are mitigated:

ifAlreadyExistsString<K extends PropertyKey, H extends PropertyKey = never>(
  data: Array<Partial<Record<K, string>> & Partial<Record<NoInfer<H>, string | number | null>>>,
  key: K,
  value: string,
  idKey?: H,
  idValue?: string | number | null
): boolean { /* implementation */ }

This solution enables seamless functionality once more:

console.log(this.ifAlreadyExistsString(data, 'text', 'no text'));
/* AppComponent.ifAlreadyExistsString<"text", never>(
     data: (Partial<Record<"text", string>> & Partial<Record<never, string | number | null>>)[], 
     key: "text", value: string, idKey?: undefined, 
     idValue?: string | number | null | undefined): boolean */

Playground link

Answer 2

In the scenario where the idKey parameter is not provided, the compiler faces difficulty inferring H, resulting in undesired consequences. The ideal expectation is for H to default to never, ensuring that

Record<never, string | number | null>

equates to an empty object {}. This prevents any restrictions on the element type of data. Regrettably, the compiler currently utilizes the array type of data to deduce H, assuming it should be keyof (typeof data)[number], which leads to errors.

To rectify this issue, a workaround involves overloading the method with distinct call signatures based on the presence or absence of idKey. The solution is as follows:

// Call signature without idKey
ifAlreadyExistsString<K extends PropertyKey>(
  data: Array<Partial<Record<K, string>>>,
  key: K,
  value: string,
): boolean;

// Call signature with idKey
ifAlreadyExistsString<K extends PropertyKey, H extends PropertyKey>(
  data: Array<Partial<Record<K, string>> & Partial<Record<H, string | number | null>>>,
  key: K,
  value: string,
  idKey?: H,
  idValue?: string | number | null
): boolean;

// Implementation
ifAlreadyExistsString<K extends PropertyKey, H extends PropertyKey>(
  data: Array<Partial<Record<K, string>> & Partial<Record<H, string | number | null>>>,
  key: K,
  value: string,
  idKey?: H,
  idValue?: string | number | null
): boolean { /* implementation */ }

The above approach resolves the issue, allowing smooth execution of the function:

console.log(this.ifAlreadyExistsString(data, 'text', 'no text')); // Approve
/* AppComponent.ifAlreadyExistsString<"text">(
    data: Partial<Record<"text", string>>[], key: "text", value: string
  ): boolean (+1 overload) */

Alternatively, another strategy involves guiding the compiler to prevent inference of H from data and setting a default to never. To achieve this, you specify that H within the data type encounters non-inferential handling. Although there is an ongoing feature request for a dedicated syntax like NoInfer<H>, current TypeScript functionalities provide a workaround as illustrated below:

type NoInfer<T> = [T][T extends any ? 0 : never];

The implementation ensures that regardless of the input, NoInfer<T> eventually evaluates to T. By deferring the evaluation of T extends any ? 0 : never, inference obstacles are mitigated:

ifAlreadyExistsString<K extends PropertyKey, H extends PropertyKey = never>(
  data: Array<Partial<Record<K, string>> & Partial<Record<NoInfer<H>, string | number | null>>>,
  key: K,
  value: string,
  idKey?: H,
  idValue?: string | number | null
): boolean { /* implementation */ }

This solution enables seamless functionality once more:

console.log(this.ifAlreadyExistsString(data, 'text', 'no text'));
/* AppComponent.ifAlreadyExistsString<"text", never>(
     data: (Partial<Record<"text", string>> & Partial<Record<never, string | number | null>>)[], 
     key: "text", value: string, idKey?: undefined, 
     idValue?: string | number | null | undefined): boolean */

Playground link

Matching only the specified Records in an array of Typescript generic objects

Answer №1

Similar questions

Ways to transfer information from HTML form components to the Angular class

Sending properties to MUI Box component enhancer (Typescript)

Regular expressions that identify text located at the conclusion of a URL

Why won't my code work with a jQuery selector?

Conditional type/interface attribute typing

Watchable: Yield the outcome of a Promise as long as watching continues

Delete the option "x" from the kendo combobox

Angular 2's ng-required directive is used to specify that

Web application is not making API calls

What determines the narrowing of a type when it is defined as a literal versus when it is returned from a function?

Utilizing the useSelect hook in Typescript to create custom types for WordPress Gutenberg, specifically targeting the core/editor

Adding Profile Photos to Authenticated User Accounts in Firebase / Ionic: A Step-By-Step Guide

Angular input form is throwing an error because it is unable to retrieve the property 'name' of an undefined value

Global Inertia Headers

Press the key to navigate to a different page

Definition of a Typescript Global.d.ts module for a function that is nested within another function

Receiving 'Module not found' error in Typings on specific machines within the same project. Any suggestions on how to troubleshoot this issue?

Is the ng-selector in Angular2 not sorting items alphabetically as expected?

What is the reason for recursion not producing a new object as output?

Bring in all subdirectories dynamically and export them