What is the best way to structure tabular data with metadata using TypeScript?

Question

What is the best way to structure tabular data with metadata using TypeScript?

Our backend provides data in a specific format, with a data section containing tabular data and a meta section describing the columns in the table. The metadata includes information about the type of each column.

For Example

{
 meta: [
  {name: "foo", type: "NUMBER"},
  {name: "bar", type: "STRING"},
  {name: "baz", type: "TIMESTAMP"},
 ],
  data:[
    [1, "a", 12121232],
    [2, "b", 12121232],
    [3, "c", 12121232],
  ]
}

Is there a way to establish the relationship between the meta and data using TypeScript?

The objective is to successfully typecheck this function, allowing the use of type information from the meta section instead of checking the content of each table cell:

const fn = (data:Data) => {
  if(data.meta[1].type ==='STRING'){
    data.data[0][1].concat('-bar')
  }
}

typescript typescript-typings

Answer 1

Answer №1

Recently, I crafted a similar piece of code. Drawing inspiration from that, here is my take on your specific scenario (playground):

type FieldType = 'NUMBER' | 'STRING' | 'TIMESTAMP';

// Disregard the warning related to the unused type parameter `S`
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface TypedField<T extends FieldType, S> {
  name: string;
  type: T;
}

type NumberField = TypedField<'NUMBER', number>;
type StringField = TypedField<'STRING', string>;
type TimestampField = TypedField<'TIMESTAMP', number>;

type Field = NumberField | StringField | TimestampField;

type TypeofField<F> = F extends TypedField<infer T, infer S> ? TypedField<T, S> extends Field ? S : never : never;

interface Data {
  meta: Array<Field>;
  data: Array<{ [K in Extract<keyof this['meta'], number>]: TypeofField<this['meta'][K]>; }>;
}

const data: Data = {
  meta: [
    { name: "foo", type: "NUMBER" },
    { name: "bar", type: "STRING" },
    { name: "baz", type: "TIMESTAMP" },
  ],
  data: [
    [ 1, "a", 12121232 ],
    [ 2, "b", 12121232 ],
    [ 3, "c", 12121232 ],
  ],
};

Answer 2

Recently, I crafted a similar piece of code. Drawing inspiration from that, here is my take on your specific scenario (playground):

type FieldType = 'NUMBER' | 'STRING' | 'TIMESTAMP';

// Disregard the warning related to the unused type parameter `S`
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface TypedField<T extends FieldType, S> {
  name: string;
  type: T;
}

type NumberField = TypedField<'NUMBER', number>;
type StringField = TypedField<'STRING', string>;
type TimestampField = TypedField<'TIMESTAMP', number>;

type Field = NumberField | StringField | TimestampField;

type TypeofField<F> = F extends TypedField<infer T, infer S> ? TypedField<T, S> extends Field ? S : never : never;

interface Data {
  meta: Array<Field>;
  data: Array<{ [K in Extract<keyof this['meta'], number>]: TypeofField<this['meta'][K]>; }>;
}

const data: Data = {
  meta: [
    { name: "foo", type: "NUMBER" },
    { name: "bar", type: "STRING" },
    { name: "baz", type: "TIMESTAMP" },
  ],
  data: [
    [ 1, "a", 12121232 ],
    [ 2, "b", 12121232 ],
    [ 3, "c", 12121232 ],
  ],
};

Answer 3

Answer №2

To tackle this issue, the key is to utilize the concept of type predicates. By recognizing that data[0][0] is a string when meta[0].type is a string, we can instruct Typescript to treat it strictly as a string. This can be achieved by adapting @MTCoters answer with the application of as:

type FieldType = 'NUMBER' | 'STRING' | 'TIMESTAMP';

// Disregard warning about unused type parameter `S`
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface TypedField<T extends FieldType, S> {
  name: string;
  type: T;
}

type NumberField = TypedField<'NUMBER', number>;
type StringField = TypedField<'STRING', string>;
type TimestampField = TypedField<'TIMESTAMP', number>;

type Field = NumberField | StringField | TimestampField;

type TypeofField<F> = F extends TypedField<infer T, infer S> ? TypedField<T, S> extends Field ? S : never : never;

interface Data {
  meta: Array<Field>;
  data: Array<{ [K in Extract<keyof this['meta'], number>]: TypeofField<this['meta'][K]>; }>;
}

const data: Data = {
  meta: [
    { name: "foo", type: "NUMBER" },
    { name: "bar", type: "STRING" },
    { name: "baz", type: "TIMESTAMP" },
  ],
  data:[
    [ 1, "a", 12121232 ],
    [ 2, "b", 12121232 ],
    [ 3, "c", 12121232 ],
  ],
};

const fn = (data:Data) => {
  if(data.meta[1].type ==='STRING'){
    (data.data[0][1] as String).concat('-bar')
  }
}

It is important to note that the functionality may break if the as String part is removed.

Answer 4

To tackle this issue, the key is to utilize the concept of type predicates. By recognizing that data[0][0] is a string when meta[0].type is a string, we can instruct Typescript to treat it strictly as a string. This can be achieved by adapting @MTCoters answer with the application of as:

type FieldType = 'NUMBER' | 'STRING' | 'TIMESTAMP';

// Disregard warning about unused type parameter `S`
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface TypedField<T extends FieldType, S> {
  name: string;
  type: T;
}

type NumberField = TypedField<'NUMBER', number>;
type StringField = TypedField<'STRING', string>;
type TimestampField = TypedField<'TIMESTAMP', number>;

type Field = NumberField | StringField | TimestampField;

type TypeofField<F> = F extends TypedField<infer T, infer S> ? TypedField<T, S> extends Field ? S : never : never;

interface Data {
  meta: Array<Field>;
  data: Array<{ [K in Extract<keyof this['meta'], number>]: TypeofField<this['meta'][K]>; }>;
}

const data: Data = {
  meta: [
    { name: "foo", type: "NUMBER" },
    { name: "bar", type: "STRING" },
    { name: "baz", type: "TIMESTAMP" },
  ],
  data:[
    [ 1, "a", 12121232 ],
    [ 2, "b", 12121232 ],
    [ 3, "c", 12121232 ],
  ],
};

const fn = (data:Data) => {
  if(data.meta[1].type ==='STRING'){
    (data.data[0][1] as String).concat('-bar')
  }
}

It is important to note that the functionality may break if the as String part is removed.

What is the best way to structure tabular data with metadata using TypeScript?

Answer №1

Answer №2

Similar questions

Is it possible to utilize useEffect for verifying the existence of the user token within the localStorage?

Strategies for managing the fallback scenario while utilizing 'createReducer' to generate a reducer and 'on' to manage actions

Error detected in Deno project's tsconfig.json file, spreading into other project files - yet code executes without issues?

Is it necessary to specify a placeholder for the reusable input in React when using typescript?

When Typecasted in Typescript, the result is consistently returned as "object"

Definitions for images in the following format

Divide the code into individual components within Angular 2 projects

Issue: The variable 'HelloWorld' has been declared but not utilized

Error: Module not found '!raw-loader!@types/lodash/common/array.d.ts' or its type declarations are missing

What are the steps to utilize a personalized validation access form within a component?

Angular 2: Issue with disabled functionality not functioning correctly

Having trouble setting up Nuxt with Typescript integration

Setting attributes within an object by looping through its keys

Attempting to create a promise for a dropdown menu in React-Select

What is the reason for injecting a service into 2 modules following the Singleton Pattern?

What is the best way to showcase the outcome of a function on the user interface in Angular 2?

Struggling to make even the most basic example work with TypeScript and npm modules

Creating a searchable and filterable singleSelect column in the MUI DataGrid: A step-by-step guide

The Angular component refuses to open

Icon for closing Mui Snackbar