Type 'string' is not assignable to type 'IconType'

I created these types

type IconType = {
    ico: "dashboard" | "program" | "score" | "record";
};

type NavigationRoute = {
    label: string;
    href: string;
    ico: IconType;
};

I receive "Type ‘string’ is not assignable to type ‘IconType’" when I implement the NavigationRoute in this array:

const navigationRoutes: NavigationRoute[] = [
    {
        label: "Panel de control",
        href: "/panel",
        ico: "dashboard"
    },
    {
        label: "Items de puntuación",
        href: "/puntuacion",
        ico: "score"
    },
    {
        label: "Orden de salida",
        href: "/programa",
        ico: "program"
    }
];

The ico variable seems to be the issue here. Can anyone shed some light on this please?

I added string to the union definition yet it still doesn’t work.

type IconType = { ico: string | "dashboard" | "program" | "score" | "record"; };

I created this playground with the code.

>Solution :

You simply have extra curly braces in the IconType type definition.

This is what you are looking for:

type IconType = "dashboard" | "score" | "program";

It’s one of those silly mistakes you need someone else to point out for you 🙂