Enhance your Typescript code by incorporating typing for response objects that include both index signatures and key-value pairs

Question

Enhance your Typescript code by incorporating typing for response objects that include both index signatures and key-value pairs

I am grappling with how to properly incorporate typescript typings for the response object received from a backend service:

{
    de49e137f2423457985ec6794536cd3c: {
        productId: 'de49e137f2423457985ec6794536cd3c',
        title: 'item 1',
    },
    d6623c1a2b843840b14c32685c212395: {
        productId: 'd6623c1a2b843840b14c32685c212395',
        title: 'item 2',
    },
    ids: [
        'de49e137f2423457985ec6794536cd3c',
        'd6623c1a2b843840b14c32685c212395',
    ],
}

This response object contains an array of item ids string[] and an index signature [id: string]: Item.

Trying to define this in Typescript is proving tricky because having both the index signature and array together in one interface causes issues. For instance:

interface ItemList {
    [id: string]: Item;
    ids: string[];
}

I understand that when using an index signature, all other properties need to have the same type. As I navigate through Typescript, I am uncertain about how to handle this data structure without extracting the ids out of the item object.

interface ItemList {
    [id: string]: Item;
    ids: string[];
}
interface Item {
    productId: string;
    title: string;
}

const item: ItemList = {
    de49e137f2423457985ec6794536cd3c: {
        productId: 'de49e137f2423457985ec6794536cd3c',
        title: 'item 1',
    },
    d6623c1a2b843840b14c32685c212395: {
        productId: 'd6623c1a2b843840b14c32685c212395',
        title: 'item 2',
    },
    ids: [
        'de49e137f2423457985ec6794536cd3c',
        'd6623c1a2b843840b14c32685c212395',
    ],
};
console.log(item.ids.map((id: string) => item[id]));

Error Message

The property 'map' is not found on type 'Item | string[]'.

The property 'map' is not found on type 'Item'.

typescript object types key-pair index-signature

Answer 1

Answer №1

To resolve this issue, you can utilize an intersection type:

type ListOfItems = {
    [key: string]: Item;
} & {
    keys: string[];
}
interface Item {
    id: string;
    name: string;
}

const itemsList: ListOfItems = Object.assign({ // You cannot directly create the object
    abc123: {
        id: 'abc123',
        name: 'Item A',
    },
    xyz456: {
        id: 'xyz456',
        name: 'Item B',
    }
}, {
    keys: [
        'abc123',
        'xyz456',
    ],
});
console.log(itemsList.keys.map((key: string) => itemsList[key]));

The intersection type allows for the combination of inconsistent named properties with indexers. (It should be noted that while not strictly type-safe because items['keys'] does not return an Item as expected, it appears to be a fair compromise in this scenario)

Answer 2

To resolve this issue, you can utilize an intersection type:

type ListOfItems = {
    [key: string]: Item;
} & {
    keys: string[];
}
interface Item {
    id: string;
    name: string;
}

const itemsList: ListOfItems = Object.assign({ // You cannot directly create the object
    abc123: {
        id: 'abc123',
        name: 'Item A',
    },
    xyz456: {
        id: 'xyz456',
        name: 'Item B',
    }
}, {
    keys: [
        'abc123',
        'xyz456',
    ],
});
console.log(itemsList.keys.map((key: string) => itemsList[key]));

The intersection type allows for the combination of inconsistent named properties with indexers. (It should be noted that while not strictly type-safe because items['keys'] does not return an Item as expected, it appears to be a fair compromise in this scenario)

Enhance your Typescript code by incorporating typing for response objects that include both index signatures and key-value pairs

Answer №1

Similar questions

Coding with Angular 4 in JavaScript

Tips for importing a file with a dynamic path in Angular 6

Exploring table iteration in Angular 7

Troubleshooting the creation of migration paths in NestJS with TypeORM

Applying the spread operator in the map function for copying objects

Guide on inserting tooltip to designated header column in primeNG data table

NestJS does not recognize TypeORM .env configuration in production build

Obtain the input value from a modal and receive an empty string if no value

Error in IONIC 3: The code is unable to read the 'nativeElement' property due to an undefined value, resulting in a TypeError

gulp-tsc cannot locate the src directory

After installing Highcharts, an error occurs stating 'Highcarts is not defined'

What are the benefits of maintaining a property as non-observable instead of observable in knockout.js?

Utilizing Angular 4 with Ahead-Of-Time compilation in combination with Electron, as well as

Develop a novel object framework by merging correlated data with identical keys

Converting React to Typescript and refactoring it leads to an issue where the property 'readOnly' is not recognized on the type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'

The value of an Angular array seems to be disappearing after being copied to another array and then cleared

Creating a custom utility type in TypeScript for serializing an array of objects: What you need to know

Leveraging private members in Typescript with Module Augmentation

Instructions on how to implement a readmore button for texts that exceed a specific character length

Managing sessions in Typescript using express framework