reactjs - Konvertera en React-komponent till Typescript Element har implicit typen 'any' eftersom uttryck av typen 'string | number' inte kan användas som index

Jag håller på att konvertera en React-komponent till TypeScript, jag har ett problem som jag inte kan lösa på något sätt, jag har ingen aning om varför jag får ett fel på variantStyles[variant][color].

Typerna är mestadels mina försök att skapa de typer som behövs för att det ska fungera, men av någon anledning kan jag inte få det att fungera ordentligt.

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

Svar #1

Kanske inte exakt svar på frågan. Men jag tror att om du omarrangerar dina typer så kanske du inte får typeError. Och om det är till någon hjälp försöker jag alltid dela upp typerna och börja bakifrån. Något sådant i ditt fall:

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
  }