CODEWITHSUNDEEP
typescript
DarthOpto
DarthOpto

Reputation: 1652

Error: Cannot invoke an expression whose type lacks a call signature from using an array

I have an array which is a has a bunch of objects in it:

const standardStories = [
{
    name: 'Executive Summary',
    navLink: 'standard-stories/executive-summary',
    cardIndex: 0,
    storyBoxes: [
        {
            name: 'Chart Box',
            values: commonStdStories.chartBoxValue,
            graphics: commonStdStories.chartBoxGraphic,
        },
        {
            name: 'Financial Chart',
            values: commonStdStories.financialChartValue,
            graphics: commonStdStories.pieChart,
        },
        {
            name: 'Info Progress Bar',
            values: commonStdStories.progressBarValue,
            graphics: commonStdStories.progressBarGraphic,
        },
    ],
},
{
    name: 'High Cost Med',
    navLink: 'standard-stories/hcc-med',
    cardIndex: 2,
    storyBoxes: [
        {
            name: 'Info Progress Bar',
            values: commonStdStories.progressBarValue,
            graphics: commonStdStories.progressBarGraphic,
        },
        {
            name: 'Chart Box',
            values: commonStdStories.chartBoxValue,
            graphics: commonStdStories.chartBoxGraphic,
        },
        {
            name: 'HCC Table',
            value: commonStdStories.hccTable,
        },
    ],
},
{
    name: 'High Cost Rx',
    navLink: 'standard-stories/hcc-rx',
    cardIndex: 3,
    storyBoxes: [
        {
            name: 'Info Progress Bar',
            values: commonStdStories.progressBarValue,
            graphics: commonStdStories.progressBarGraphic,
        },
        {
            name: 'Chart Box',
            values: commonStdStories.chartBoxValue,
            graphics: commonStdStories.chartBoxGraphic,
        },
        {
            name: 'HCC Table',
            value: commonStdStories.hccTable,
        },
    ],
},
]

There are more, but you get the picture.

I am trying to use the storyBoxes like so:

standardStories.forEach(story => {
    **story.storyBoxes.forEach(storyBox => {})**
})

On the bolded line is where I am getting the error [ts] Cannot invoke an expression whose type lacks a call signature Just wondering how to fix this so I can move on. Ideally I want to be able to loop through each story checking for each of the storyBoxes outlined in the storyBox for each story.

Upvotes: 0

Views: 239

Answers (3)

Karol Majewski
Karol Majewski

Reputation: 25790

This is no longer the case in TypeScript 3.2. Now, if every member of a union is callable, the union itself is callable as well.

Upvotes: 0

DarthOpto
DarthOpto

Reputation: 1652

So I fixed this by changing the name in the storyBoxes array to boxName and making the value to be values like the others.

Upvotes: 0

Titian Cernicova-Dragomir
Titian Cernicova-Dragomir

Reputation: 249666

It depends on what the type of the properties inside commonStdStories. If the types for the properties inside the storyBoxes are not consistent, the type of storyBoxes may end up being a union of arrays, which you can't use as an array because the methods end up being unions of the versions for each type in the union.

The simplest solution is to add a clear type for the constant, based on what I see inside the question, this would be a version:

interface IStory {

    name: string;
    navLink: string;
    cardIndex: number;
    storyBoxes: Array<{
        name: string;
        value?: string | number;
        values?: string| number; // Typo maybe ? do you want both value and values ?
        graphics?: string| number;
    }>;
}

Playground link

Upvotes: 1

Related Questions