Troubles arise when attempting to map a typed object | Unable to call a type that does not have a signature for invocation

Question

Troubles arise when attempting to map a typed object | Unable to call a type that does not have a signature for invocation

I have an object named "containers" that will always contain the same type of component on every key.

The code snippet below functions as intended

interface Dictionary<T> {
    [key: string]: T;
}

interface GameContainer {
    zIndex: number;
}

interface Game {
    containers: Dictionary<GameContainer>;
}

const game: Game = {
    containers: {
        a: { zIndex: 2 },
        b: { zIndex: 4 }
    }
}

An issue arises when attempting to map over "containers"

const something = game.containers.map(container => {
    console.log(container)
})

Upon trying this, I encounter the following error message

Cannot invoke an expression whose type lacks a call signature. Type 'GameContainer' has no compatible call signatures.

This error seems unusual to me because it should work in vanilla JavaScript.

You can click here for a link to a typescript playground to observe the error

typescript dictionary

Answer 1

Answer №1

Here is a helpful example:

declare module namespace {

    export interface A {
        positionIndex: number;
    }

    export interface B {
        positionIndex: number;
    }

    export interface Containers {
        a: A;
        b: B;
    }

    export interface RootObject {
        containers: Containers;
    }

}

Implementation:

const appData: RootObject = {
    containers: {
        a: { positionIndex: 2 },
        b: { positionIndex: 4 }
    }
}

Next, you can loop through the containers like this:

Object.keys(appData.containers).map(function(key, index) {
   console.log(appData.containers[key]);
})

Answer 2

Here is a helpful example:

declare module namespace {

    export interface A {
        positionIndex: number;
    }

    export interface B {
        positionIndex: number;
    }

    export interface Containers {
        a: A;
        b: B;
    }

    export interface RootObject {
        containers: Containers;
    }

}

Implementation:

const appData: RootObject = {
    containers: {
        a: { positionIndex: 2 },
        b: { positionIndex: 4 }
    }
}

Next, you can loop through the containers like this:

Object.keys(appData.containers).map(function(key, index) {
   console.log(appData.containers[key]);
})

Troubles arise when attempting to map a typed object | Unable to call a type that does not have a signature for invocation

Answer №1

Similar questions

Having difficulty building a react.js application using Visual Studio 2019

Assignment of reference to an item in a Python dictionary

When using VS Code, custom.d.ts will only be recognized if the file is currently open in the

Setting up d3 to function properly with Angular2 and TypeScript

Issues with the functionality of CSS Modules and hover styles_integration

What is the method for retrieving array values from an attribute?

Utilize string values as identifiers in type declarations

A guide on setting up custom themes in Vue.js with TypeScript

Is there a way to access the value of an IPC message beyond just using console log?

When running the 'nest build' command, a critical error occurs: 'FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory'

Improve your typing accuracy by enforcing strict null checks

Displaying data on the user interface in Angular by populating it with information from the form inputs

Is there a faster way to create a typescript constructor that uses named parameters?

React-Bootstrap columns are not displaying in a side by side manner and are instead appearing on separate lines

Unraveling nested elements with the array map() method in Angular2 and Typescript: Fixing the issue of undefined property reference while mapping

Learning about React and TypeScript: Easy steps to import a component

Utilize TypeScript functions within Angular applications

Maintaining the order of a dictionary (or similar data structure) in Python

Exploring the concept of String Enums through Reverse-Mapping

Enhancing interface properties with type safety in a function declaration using Typescript