Working with an array of objects with varying shapes and validating them

Question

Working with an array of objects with varying shapes and validating them

I have dedicated quite a bit of time to this task and would greatly appreciate some assistance. I am in need of a component (a function) that can accept an array of objects while also validating the properties of these objects.

Here are the interfaces and data structures:

interface ObjectWithId {
  id: string | number;
}

interface TableMeta<T extends ObjectWithId, K extends PropertyKey = keyof T> {
  data: T[];
  searchKey: K;
  onClick?: (item: T) => void;
}

interface Vegetable {
  id: number,
  label: string,
}

interface Fruit {
  id: number, 
  name: string,
}

const vegetableMeta: TableMeta<Vegetable> = {
  data: [],
  searchKey: 'label', // only allows 'label' or 'id' 👍
}

const fruitMeta: TableMeta<Fruit> = {
  data: [],
  searchKey: 'name', // only allows 'name' or 'id' 👍
  onClick: (item) => {item.id} // ✔️ has correct item type <---------------
}

const metas = [vegetableMeta, fruitMeta];

Now, let's look at a component (which is essentially a function):

const metaParser = (metas: TableMeta<{id: number | string}, PropertyKey>[]) => {
  const id = metas[0].data[0].id; // should be `number | string`
}

metaParser(metas); // ❌ Type 'ObjectWithId' is not assignable to type 'Vegetable'

The specific structure of objects within the array cannot be predetermined

Any suggestions on how we can make this work?

TS Playground

typescript typescript-generics

Answer 1

Answer №1

To enhance the functionality, one strategy is to unveil the callback type and broaden its applicability when managing a group of items.

interface ObjectWithId {
  id: string | number;
}

interface TableMeta<
  T extends ObjectWithId,
  K extends PropertyKey = keyof T,
  F extends (item: never) => void = (item: T) => void, // <--- reveal the type
> {
  data: T[];
  searchKey: K;
  onClick?: F;
}

interface Vegetable {
  id: number,
  label: string,
}

interface Fruit {
  id: number, 
  name: string,
}

const vegetableMeta: TableMeta<Vegetable> = {
  data: [],
  searchKey: 'label',
}

const fruitMeta: TableMeta<Fruit> = {
  data: [],
  searchKey: 'name',
  onClick: (item) => {item.id}
}

const metas = [vegetableMeta, fruitMeta];

                                                broaden the scope ---⌄
const metaParser = (metas: TableMeta<ObjectWithId, PropertyKey, (item: never) => void>[]) => {
  const id = metas[0].data[0].id;
}

metaParser(metas);

Answer 2

To enhance the functionality, one strategy is to unveil the callback type and broaden its applicability when managing a group of items.

interface ObjectWithId {
  id: string | number;
}

interface TableMeta<
  T extends ObjectWithId,
  K extends PropertyKey = keyof T,
  F extends (item: never) => void = (item: T) => void, // <--- reveal the type
> {
  data: T[];
  searchKey: K;
  onClick?: F;
}

interface Vegetable {
  id: number,
  label: string,
}

interface Fruit {
  id: number, 
  name: string,
}

const vegetableMeta: TableMeta<Vegetable> = {
  data: [],
  searchKey: 'label',
}

const fruitMeta: TableMeta<Fruit> = {
  data: [],
  searchKey: 'name',
  onClick: (item) => {item.id}
}

const metas = [vegetableMeta, fruitMeta];

                                                broaden the scope ---⌄
const metaParser = (metas: TableMeta<ObjectWithId, PropertyKey, (item: never) => void>[]) => {
  const id = metas[0].data[0].id;
}

metaParser(metas);

Answer 3

Answer №2

UPDATE THREE

type Base = { id: number | string } & { [p: string]: unknown }

interface Data<T extends Base> {
  data: Array<T>;
}

interface SearchKey<T extends Base> {
  searchKey: Exclude<keyof T, 'id'>;
}

type TableMeta<T extends Base> = Data<T> & SearchKey<T>

/**
 * It seems this additional setup is necessary for accurate type inference
 */
const builder = <T extends Base, K extends Exclude<keyof T, 'id'>>(searchKey: K, data: Array<T>): TableMeta<T> => ({ data, searchKey });


const metas = [
  builder('name', [{ id: 2, name: 2 }]),
  builder('key', [{ id: '2', key: 'John Doe' }]),
  // builder('hello', [{ id: 3, age: 42 }]) //expected error
];

const metaParser = <T extends TableMeta<Base>>(metas: Array<T>) => {
  const result = metas // T[]
  const result2 = metas[0].searchKey// string | number
  const result3 = metas[0].data[0].id// string | number
  return metas
}


const result = metaParser(metas); // ok

Here you can discover more insights on typing callbacks. Implementing this without the helper builder function may pose a challenge.

You might want to explore this solution, but it still requires the use of extra functions.

Answer 4

UPDATE THREE

type Base = { id: number | string } & { [p: string]: unknown }

interface Data<T extends Base> {
  data: Array<T>;
}

interface SearchKey<T extends Base> {
  searchKey: Exclude<keyof T, 'id'>;
}

type TableMeta<T extends Base> = Data<T> & SearchKey<T>

/**
 * It seems this additional setup is necessary for accurate type inference
 */
const builder = <T extends Base, K extends Exclude<keyof T, 'id'>>(searchKey: K, data: Array<T>): TableMeta<T> => ({ data, searchKey });


const metas = [
  builder('name', [{ id: 2, name: 2 }]),
  builder('key', [{ id: '2', key: 'John Doe' }]),
  // builder('hello', [{ id: 3, age: 42 }]) //expected error
];

const metaParser = <T extends TableMeta<Base>>(metas: Array<T>) => {
  const result = metas // T[]
  const result2 = metas[0].searchKey// string | number
  const result3 = metas[0].data[0].id// string | number
  return metas
}


const result = metaParser(metas); // ok

Here you can discover more insights on typing callbacks. Implementing this without the helper builder function may pose a challenge.

You might want to explore this solution, but it still requires the use of extra functions.

Working with an array of objects with varying shapes and validating them

Answer №1

Answer №2

Similar questions

Access an array to filter by specific key-value pairs

To emphasize the chosen item following a component's update

Angular2 - how can I effectively organize the logic between my components and services?

Can classes from an external package be imported into an Angular library within an Angular app using Openlayers?

Mapping strings bidirectionally in Typescript

What is the process for creating a Deep Copy of an object in Angular?

Issue with passing parameters to function when calling NodeJS Mocha

Generating data types based on the output of functions

Angular 10 Reactive Form - Controlling character limit in user input field

Discovering Typescript: Inferring the type of a union containing specific strings

Encountered a React TypeScript issue stating that the type '{ ... }' cannot be assigned to the type 'IntrinsicAttributes & IntrinsicClassAttributes<...>'

Array that accepts the type of the first element as its generic parameter

What steps can be taken to avoid an abundance of JS event handlers in React?

Building a TTL based schema in NestJs with MongooseIn this guide, we will explore

(React Native - Expo) The hook array fails to include the most recently selected object

Is it possible to utilize an XML format for translation files instead of JSON in React Native?

Having trouble accessing the useState hook in React context value with TypeScript

Encountering the error message "TypeError: Cannot access property 'Token' of undefined" while compiling fm.liveswitch

The TypeScript error occurs when trying to set the state of a component: The argument 'X' cannot be assigned to the parameter of type '() => void'

Utilizing Window function for local variable assignment