CODEWITHSUNDEEP
typescriptdictionary
ellipticaldoor
ellipticaldoor

Reputation: 1272

Problems mapping a typed object | Cannot invoke an expression whose type lacks a call signature

I have an object called "containers" that is going to always going contain on every key the same kind of component.

The following code works as expected

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 }
    }
}

The problem arrives when trying to map "containers"

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

After trying this I get the error

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

Which is strange for me because in normal javascript this just works.

Here is a link to a typescript playground so you can see the error

Upvotes: 4

Views: 410

Answers (1)

POV
POV

Reputation: 12005

Try this:

declare module namespace {

    export interface A {
        zIndex: number;
    }

    export interface B {
        zIndex: number;
    }

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

    export interface RootObject {
        containers: Containers;
    }

}

Using:

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

Then iterate this:

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

Upvotes: 1

Related Questions