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

Issue arose while attempting to use Jest on a React Native application integrated with TypeScript (Jest has come across an unforeseen token)

What is the right way to import a module in TypeScript?

What is the best way to retrieve distinct objects based on LocId across all locations?

Ways to parse the data from a response received from an Axios POST request

What is the reason behind create-next-app generating .tsx files instead of .js files?

Prevent the event listener from continuously triggering

The issue of Angular 9 not recognizing methods within Materialize CSS modals

Create Functions to Encapsulate Type Guards

ReactNative: When attempting to navigate, a TypeError occurred - this.props.navigation.navigate is not a function

Retrieve the data from the mat-checkbox

Aurelia: The passing down of views and view-models

Is there any need for transpiling .ts files to .js when Node is capable of running .ts files directly?

The angular-CLI does not support the use of content delivery networks (CDNs) within the .angular-cli.json

Exploring the syntax of typescript when using createContext

The attribute 'attribs' is not found on the 'Element' type in cheerio

Combine an array of objects that are dynamically created into a single object

Retrieve all elements within an Angular6 Directive that share the same name as the Directive

Transitioning an AngularJS factory to TypeScript

Updating the Nuxt3 editing page with useFetch and $fetch for fetching data, along with a typed storage object that prevents loading issues

Display corresponding JSON images of items within an *ngFor loop in Angular