Converting a React component to Typescript Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index

Question

I am converting a React component to typescript, I have an issue and I can not solve it any way, I have no idea what the reason is why I am getting on variantStyles[variant][color] an error.

The types are mostly my attempts to create the types necessary for it to work, but for some reason I can get it to work properly.

Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type '{ solid: { slate: string; blue: string; white: string; }; outline: { slate: string; white: string; }; }'.
  No index signature with a parameter of type 'string' was found on type '{ solid: { slate: string; blue: string; white: string; }; outline: { slate: string; white: string; }; }'.ts(7053)

import Link from 'next/link'
import clsx from 'clsx'
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';

type ButtonProps = {
  variant: keyof typeof baseStyles;
  color: keyof typeof variantStyles[keyof typeof variantStyles];
  className?: string;
  href?: string;
};

const baseStyles: {
  [baseStyle : string]: string;
} = {
  solid:
    'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
  outline:
    'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none',
}

const variantStyles : {
  solid: {
    slate: string;
    blue: string;
    white: string;
  },
  outline: {
    slate: string;
    white: string;
  }
} = {
  solid: {
    slate:
      'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900',
    blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
    white:
      'bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white',
  },
  outline: {
    slate:
      'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300',
    white:
      'ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white',
  },
}

export function Button({
  variant = 'solid',
  color = 'slate',
  className,
  href,
  ...props
} : ButtonProps ) {
  className = clsx(
    baseStyles[variant],
    variantStyles[variant][color],
    className
  )

  return href ? (
    <Link href={href} className={className} {...props} />
  ) : (
    <button className={className} {...props} />
  )
}

Answer 1

Maybe not exactly answer to the question. But I think if you rearrange your types you maybe not get the typeError. And if it's some help I always try to split the types and start from behind. Something like this in your case:

type Colors = {
  slate: string;
  white: string;
  blue?: string
}

type BaseStyles = {
  solid: string;
  outline: string;
}

type VariantStyles = {
  solid: Colors;
  outline: Colors;
}

type ButtonProps = {
  variant: keyof BaseStyles;
  color: keyof Colors;
  className?: string;
  href?: string;
}

const baseStyles: BaseStyles = {
  solid: 'your string',
  outline: 'your string',
}

const variantStyles: VariantStyles = {
  solid: { 
    slate: 'your string',
    blue: 'your string',
    et.c
  }