Tips on inferring a distinct generic type for every element within an array of objects

Question

Tips on inferring a distinct generic type for every element within an array of objects

I'm working on code that creates a timeline chart for data. I want the code to accept an array of series, each containing data and various getters used to position and render the data on the chart.

Below is a simplified example of the code. The actual implementation would involve multiple getters on DataSeries<T> and rendering with React, but those details are not relevant to my current issue.

export interface DataSeries<T> {
  data: T[];
  asNumber: (d: T) => number;
}

export function DataSeriesAsNumbers<T>(series: DataSeries<T>[]) {
  series.forEach((s) => {
    s.data.forEach((d) => {
      console.log(s.asNumber(d).toFixed(0));
    });
  });
}

My problem arises when using the function and trying to infer the parameter type for the getNumber callbacks based on the data provided in the accompanying data property.

DataSeriesAsNumbers([
  {
    data: [
      { val: 1, seq: 12346 },
      { val: 2, seq: 12347 },
    ],
    asNumber: (d) => d.val,
  },
  {
    data: [
      { amount: 6, type: 5 },
      { amount: 20, type: 4 },
    ],
    asNumber: (d) => d.amount,
  },
]);

So far, I haven't been able to achieve this automatically. I've tried manually specifying types or disregarding types altogether by using

DataSeriesAsNumbers<T = any>

.

The issue seems to stem from the series: DataSeries<T>[] part, where mixing different objects in the data properties requires all getters to adhere to the same union type. This results in assigning a union type to the d parameter:

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

I've explored using the infer keyword without success, and have come across syntax like [...T] online but haven't been able to implement it successfully.

Is there a way to automatically infer the parameter type for callbacks based on the associated data array?

typescript typescript-generics

Answer 1

Answer №1

If you need to create a mapped type for an array/tuple type, you can achieve it like this:

function RenderDataChart<T extends any[]>(
  series: [...{ [I in keyof T]: DataSeries<T[I]> }]
) {
  series.forEach(<TI,>(s: DataSeries<TI>) => {
    s.data.forEach((d) => {
      const x = s.getX(d);
      const y = s.getY(d);
      const color = s.getColor(d);
      render(x, y, color, d) // implementing rendering logic
    });
  })
}

The mapped type

{[I in keyof T]: DataSeries<T[I]>}

wraps each element T[I] from the tuple type T with DataSeries<>. For instance, if T is [X, Y, Z], then the mapped type will be

[DataSeries<X>, DataSeries<Y>, DataSeries<Z>]

. The compiler automatically infers T based on this mapped type.

Additionally, enclosing the mapped type within a variadic tuple type like [...+] ensures that the compiler interprets the series input as a tuple type rather than a regular array. This distinction helps maintain behavior consistency.

While TypeScript currently lacks contextual type inference for callback parameters when inferred from a mapped type, there is a feature request open for this improvement at microsoft/TypeScript#53018:

RenderDataChart([
  {
    data: [{ val: 1, seq: 12346 }, { val: 2, seq: 12347 }],
    getX: (d) => d.val, // error
    getY: (d) => d.seq, // error
    getColor: (d) => d.val === 0 ? "red" : "blue", // error
  },
  {
    data: [{ amount: 6, type: 5 }, { amount: 20, type: 4 }],
    getX: (d) => d.amount, // error
    getY: (d) => d.type, // error
    getColor: () => "green", 
  },
]);
// Inferred type of T: [{ val: number; seq: number;}, { amount: number; type: number;}]>

Until an enhancement is made to address this issue, using a generic helper function for callback parameter inference can provide a workaround. For example:

const h = <T,>(x: DataSeries<T>) => x;

This function facilitates correct inference, as demonstrated below:

RenderDataChart([
  h({
    data: [{ val: 1, seq: 12346 }, { val: 2, seq: 12347 }],
    getX: (d) => d.val,
    getY: (d) => d.seq,
    getColor: (d) => d.val === 0 ? "red" : "blue",
  }),
  h({
    data: [{ amount: 6, type: 5 }, { amount: 20, type: 4 }],
    getX: (d) => d.amount,
    getY: (d) => d.type,
    getColor: () => "green",
  }),
]);
// Inferred type of T: [{ val: number; seq: number;}, { amount: number; type: number;}]>

With this approach, you achieve precise typing and proper contextual inference for the callback parameters d.

Access the code on the TypeScript Playground

Answer 2

If you need to create a mapped type for an array/tuple type, you can achieve it like this:

function RenderDataChart<T extends any[]>(
  series: [...{ [I in keyof T]: DataSeries<T[I]> }]
) {
  series.forEach(<TI,>(s: DataSeries<TI>) => {
    s.data.forEach((d) => {
      const x = s.getX(d);
      const y = s.getY(d);
      const color = s.getColor(d);
      render(x, y, color, d) // implementing rendering logic
    });
  })
}

The mapped type

{[I in keyof T]: DataSeries<T[I]>}

wraps each element T[I] from the tuple type T with DataSeries<>. For instance, if T is [X, Y, Z], then the mapped type will be

[DataSeries<X>, DataSeries<Y>, DataSeries<Z>]

. The compiler automatically infers T based on this mapped type.

Additionally, enclosing the mapped type within a variadic tuple type like [...+] ensures that the compiler interprets the series input as a tuple type rather than a regular array. This distinction helps maintain behavior consistency.

While TypeScript currently lacks contextual type inference for callback parameters when inferred from a mapped type, there is a feature request open for this improvement at microsoft/TypeScript#53018:

RenderDataChart([
  {
    data: [{ val: 1, seq: 12346 }, { val: 2, seq: 12347 }],
    getX: (d) => d.val, // error
    getY: (d) => d.seq, // error
    getColor: (d) => d.val === 0 ? "red" : "blue", // error
  },
  {
    data: [{ amount: 6, type: 5 }, { amount: 20, type: 4 }],
    getX: (d) => d.amount, // error
    getY: (d) => d.type, // error
    getColor: () => "green", 
  },
]);
// Inferred type of T: [{ val: number; seq: number;}, { amount: number; type: number;}]>

Until an enhancement is made to address this issue, using a generic helper function for callback parameter inference can provide a workaround. For example:

const h = <T,>(x: DataSeries<T>) => x;

This function facilitates correct inference, as demonstrated below:

RenderDataChart([
  h({
    data: [{ val: 1, seq: 12346 }, { val: 2, seq: 12347 }],
    getX: (d) => d.val,
    getY: (d) => d.seq,
    getColor: (d) => d.val === 0 ? "red" : "blue",
  }),
  h({
    data: [{ amount: 6, type: 5 }, { amount: 20, type: 4 }],
    getX: (d) => d.amount,
    getY: (d) => d.type,
    getColor: () => "green",
  }),
]);
// Inferred type of T: [{ val: number; seq: number;}, { amount: number; type: number;}]>

With this approach, you achieve precise typing and proper contextual inference for the callback parameters d.

Access the code on the TypeScript Playground

Answer 3

Answer №2

Special thanks to jcalz's insightful comment, I have managed to create a somewhat functioning version of the solution. If they are willing to provide an answer, I eagerly await and will accept it, hoping for an even better approach than my current one.

By utilizing a helper function to circumvent the issue described in ms/TS#53018, we can establish type inference per dataseries object. Otherwise, the parameters default to any. Initially prompted by my linter warning, I pondered if there was a way to enforce the use of the helper function through a branded type, which I have included in the code snippet below.

Here is the initial version without a branded type:

export interface DataSeries<T> {
  data: T[];
  asNumber: (d: T) => number;
}

export function RenderDataChart<T extends DataSeries<any>>(series: T[]) {
  series.forEach((s) => {
    s.data.forEach((d) => {
      console.log(s.asNumber(d).toFixed(0));
    });
  });
}

export function createDataSeries<DataType>(
  series: DataSeries<DataType>
): DataSeries<DataType> {
  return series;
}

RenderDataChart([
  {
    data: [
      { val: 1, seq: 12346 },
      { val: 2, seq: 12347 },
    ],
    asNumber: (d) => d.val, // d: any
  },
  {
    data: [
      { amount: 6, type: 5 },
      { amount: 20, type: 4 },
    ],
    asNumber: (d) => d.amount, // d: any
  },
  createDataSeries({
    data: [
      { val: 1, seq: 12346 },
      { val: 2, seq: 12347 },
    ],
    asNumber: (d) => d.val, // d: { val: number; seq: number; }
  }),
  createDataSeries({
    data: [
      { amount: 6, type: 5 },
      { amount: 20, type: 4 },
    ],
    asNumber: (d) => d.amount, // d: { amount: number; type: number; }
  }),
]);

Now, introducing the usage of a branded type (excerpt from example code):

export interface IDataSeries<T> {
  data: T[];
  asNumber: (d: T) => number;
}

export type DataSeries<T> = IDataSeries<T> & { 
  // @see createDataSeries
  __dataseries: never
};

export function RenderDataChart<T extends DataSeries<any>>(series: T[]) {
  series.forEach((s) => {
    s.data.forEach((d) => {
      console.log(s.asNumber(d).toFixed(0));
    });
  });
}

export function createDataSeries<DataType>(
  series: IDataSeries<DataType>
): DataSeries<DataType> {
  return series as DataSeries<DataType>;
}

RenderDataChart([
  // Errors:
  {
    data: [
      { val: 1, seq: 12346 },
      { val: 2, seq: 12347 },
    ],
    asNumber: (d) => d.val,
  },
  // Works:
  createDataSeries({
    data: [
      { val: 1, seq: 12346 },
      { val: 2, seq: 12347 },
    ],
    asNumber: (d) => d.val, // d: { val: number; seq: number; }
  }),
]);

Answer 4

Special thanks to jcalz's insightful comment, I have managed to create a somewhat functioning version of the solution. If they are willing to provide an answer, I eagerly await and will accept it, hoping for an even better approach than my current one.

By utilizing a helper function to circumvent the issue described in ms/TS#53018, we can establish type inference per dataseries object. Otherwise, the parameters default to any. Initially prompted by my linter warning, I pondered if there was a way to enforce the use of the helper function through a branded type, which I have included in the code snippet below.

Here is the initial version without a branded type:

export interface DataSeries<T> {
  data: T[];
  asNumber: (d: T) => number;
}

export function RenderDataChart<T extends DataSeries<any>>(series: T[]) {
  series.forEach((s) => {
    s.data.forEach((d) => {
      console.log(s.asNumber(d).toFixed(0));
    });
  });
}

export function createDataSeries<DataType>(
  series: DataSeries<DataType>
): DataSeries<DataType> {
  return series;
}

RenderDataChart([
  {
    data: [
      { val: 1, seq: 12346 },
      { val: 2, seq: 12347 },
    ],
    asNumber: (d) => d.val, // d: any
  },
  {
    data: [
      { amount: 6, type: 5 },
      { amount: 20, type: 4 },
    ],
    asNumber: (d) => d.amount, // d: any
  },
  createDataSeries({
    data: [
      { val: 1, seq: 12346 },
      { val: 2, seq: 12347 },
    ],
    asNumber: (d) => d.val, // d: { val: number; seq: number; }
  }),
  createDataSeries({
    data: [
      { amount: 6, type: 5 },
      { amount: 20, type: 4 },
    ],
    asNumber: (d) => d.amount, // d: { amount: number; type: number; }
  }),
]);

Now, introducing the usage of a branded type (excerpt from example code):

export interface IDataSeries<T> {
  data: T[];
  asNumber: (d: T) => number;
}

export type DataSeries<T> = IDataSeries<T> & { 
  // @see createDataSeries
  __dataseries: never
};

export function RenderDataChart<T extends DataSeries<any>>(series: T[]) {
  series.forEach((s) => {
    s.data.forEach((d) => {
      console.log(s.asNumber(d).toFixed(0));
    });
  });
}

export function createDataSeries<DataType>(
  series: IDataSeries<DataType>
): DataSeries<DataType> {
  return series as DataSeries<DataType>;
}

RenderDataChart([
  // Errors:
  {
    data: [
      { val: 1, seq: 12346 },
      { val: 2, seq: 12347 },
    ],
    asNumber: (d) => d.val,
  },
  // Works:
  createDataSeries({
    data: [
      { val: 1, seq: 12346 },
      { val: 2, seq: 12347 },
    ],
    asNumber: (d) => d.val, // d: { val: number; seq: number; }
  }),
]);

Tips on inferring a distinct generic type for every element within an array of objects

Answer №1

Answer №2

Similar questions

Experiencing a type error within Redux in a React Native project utilizing TypeScript

Error Found: Unexpected Colon (:) in Vue TypeScript File

Prevent coverage tracking for files or paths enclosed in square brackets in jest

Incorporating optional fields into the form builder without being mandatory

Using TypeScript to Initialize Arrays with Objects

Utilize a variable from one Angular component in another by sharing it between .ts files

Guide on linking enum values with types in TypeScript

The NextAuth getServerSession function is functional when used with a POST API method, but it

Stop webpack from stripping out the crypto module in the nodejs API

Angular2 tutorial with VS2015 may encounter a call-signature error that is expected

Utilizing PropTypes in React with TypeScript

Tips for choosing and unchoosing rows in angular 6

The mat-table's data source is failing to refresh and display the latest

Click to alter the style of an <li> element

Does the JavaScript Amazon Cognito Identity SDK offer support for the Authorization Code Grant flow?

What is the reason why modifying a nested array within an object does not cause the child component to re-render?

Choose a specific interface in Typescript

Encountering a problem while bringing in screens: 'The file screens/xxx cannot be located within the project or any of these folders.'

Can the Date class be expanded by overloading the constructor method?

Issues with using hooks in a remote module in Webpack 5 module federation