No index signature with a parameter of type 'string' for a React component

Question

I am trying to access a nested object structure using object keys, but TypeScript gives me the error:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type...

My color themes object structure is as follows:

colors: {
    background: string;
    text: string;
    black: string;
    white: string;
    yellow: {
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
    };
    green: {
        100: string;
        ... 7 more ...;
        900: string;
    };
    red: {
        ...;
    };
    cyan: {
        ...;
    };
    purple: {
        ...;
    };
    gray: {
        ...;
    };
}

But when I am accessing the color, it shows me the error. Please help. I am not able to access the themes.colors[color][weight] Error:

Christopher Peisert · Accepted Answer · 2021-11-13 21:05:32Z

1

One option would be to define the colors object as a record type:

colors: Record<string, any> = {
    background: string;
    text: string;
    black: string;
    ...
};

Or use a typecast on the index key:

export const getColor = (color: string, weight: number, alpha = 1) => {
  const theme = useTheme();
  return hexToRgba(theme.colors[color as keyof typeof theme.colors][weight], alpha);
};

Another option, would be to use a typecast on the colors object:

export const getColor = (color: string, weight: number, alpha = 1) => {
  const theme = useTheme();
  return hexToRgba((theme.colors as {[key: string]: any})[color][weight], alpha);
};

See Stack Overflow question Typescript Error: type 'string' can't be used to index type X.

edited Nov 13, 2021 at 21:05

answered Nov 13, 2021 at 20:59

Christopher Peisert

24.5k4 gold badges102 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christopher Peisert Over a year ago

@DhruvKothari If you want precise type checking, then you could define a ThemeColors interface or a ThemeColors type. This would be especially appropriate if you use the theme colors in several places in your app. If, however, the theme colors are only used in one or two places, then using any is probably ok.

Christopher Peisert Over a year ago

@DhruKothari If this answer solved your problem, could you mark it as the accepted answer?

Collectives™ on Stack Overflow

No index signature with a parameter of type 'string' for a React component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related