Ways to retrieve data types from the values of a different interface

Question

Ways to retrieve data types from the values of a different interface

Imagine having an interface called TableHeader:

interface TableHeader{
  key: string,
  value: string,
}

Next, we need to create an interface for TableData, where:

interface TableData{
  // ????
}

In this table data, the key should be of the type that matches one of the keys in TableHeader[],

for instance if we define

const tableHeaders : tableHeader[]=[
 { key: 'index', value: 'Index'},
 { key: 'firstName', value: 'First Name'},
 { key: 'lastName', value: 'Last Name'}
]

then, when we declare

const tableData: TableData[] = [
  {
   // each object in this array must include keys `index`, `firstName`, `lastName` 
   // along with their respective values (e.g. strings).
  },
  {
    .
    .
    .
  },
]

What would be the best way to accomplish this?

typescript

Answer 1

Answer №1

Here is the provided code:

// Table.ts

export interface Header<K>
{
    key: K;
    value: string;
}

export interface Data<K>
{
    key: K;
    value: string;
}

export class Table<K>
{

    headers: Header<K>[];
    data: Data<K>[];
    keys: K[];

    constructor()
    {
        this.headers = [];
        this.data = [];
        this.keys = [];
    }

    addHeader(...newHeader: Header<K>[]): void
    {
        this.headers.push(...newHeader);
        for (let i = 0; i < newHeader.length; i++)
            this.keys.push(newHeader[i].key);
    }

    addData(newData: Data<K>): void
    {
        if (this.keys.includes(newData.key))
        {
            this.data.push(newData);
        }
        else
        {
            throw "Data key does not exist in input array";
        }
    }

}

// Usecase.ts

import { Table } from './Table.js';

type Keys = "index" | "firstName" | "lastName";
let table = new Table<Keys>();

table.addHeader(
    {
        key: "index",
        value: "ID"
    }
);

try
{
    table.addData({
        key: "index",
        value: "456789"
    });
} catch(error) {
    console.log(`Error occurred: ${error}\n`);
}

console.log(table);

Answer 2

Here is the provided code:

// Table.ts

export interface Header<K>
{
    key: K;
    value: string;
}

export interface Data<K>
{
    key: K;
    value: string;
}

export class Table<K>
{

    headers: Header<K>[];
    data: Data<K>[];
    keys: K[];

    constructor()
    {
        this.headers = [];
        this.data = [];
        this.keys = [];
    }

    addHeader(...newHeader: Header<K>[]): void
    {
        this.headers.push(...newHeader);
        for (let i = 0; i < newHeader.length; i++)
            this.keys.push(newHeader[i].key);
    }

    addData(newData: Data<K>): void
    {
        if (this.keys.includes(newData.key))
        {
            this.data.push(newData);
        }
        else
        {
            throw "Data key does not exist in input array";
        }
    }

}

// Usecase.ts

import { Table } from './Table.js';

type Keys = "index" | "firstName" | "lastName";
let table = new Table<Keys>();

table.addHeader(
    {
        key: "index",
        value: "ID"
    }
);

try
{
    table.addData({
        key: "index",
        value: "456789"
    });
} catch(error) {
    console.log(`Error occurred: ${error}\n`);
}

console.log(table);

Ways to retrieve data types from the values of a different interface

Answer №1

Similar questions

Having trouble getting undefined values for keys while attempting to retrieve all the data from Firebase DB with Angular

The Function-supported Operation is having trouble implementing a modification related to Geohash/Geopoint - the Object Type requires a String format

Redux-toolkit payload does not recognize the specified type

NestJs Function yielding inconsistent results based on its calling location

Implementing multi-select checkbox feature in Angular 7 using ng-select

Typescript's Intersection Types: The Key to Overlapping Properties

Having trouble inserting the current time into Firebase Firestore

What are the steps for integrating Angularfire2 into an Angular application?

Is it feasible to mock a defined function in Typescript for a unit test scenario?

How can you incorporate TypeScript's dictionary type within a Mongoose schema?

Best practices for initializing model objects in a Redux or NgRx application architecture

Using Angular 5+ to fetch information from an ASP.NET Core Web API

Retrieve a specific subdirectory from the bundle

Unable to break down the property 'desks' of '(0 , _react.useContext)(...)' due to its undefined nature

Verify whether the default export of a file is a React function component or a standard function

Refine the primary list by narrowing it down according to a secondary list

Transferring an array of interfaces between Angular 2 components

Solving the issue in Next JS: Troubleshooting the Error: connect ECONNREFUSED 127.0.0.1:3003 in TCPConnectWrap.afterConnect [as oncomplete]

How can I turn off strict null checks in TypeScript when using ESLint?

When utilizing express-handlebars to render, the error message "req.next() is not a valid function