#No index signature with a parameter of type 'string' was found on type ...

5 messages · Page 1 of 1 (latest)

wooden wigeon
#

Hello guys. I'm quite new to TypeScript. I have an error that's preventing my project from compiling. Kindly help

// SkillBadge.tsx

type SkillBadgeType = {
  text: string
  theme: string
}

const skillThemeVariants = {
  blue: 'text-blue-100 bg-blue-500',
  sky: 'text-sky-100 bg-sky-500',
  yellow: 'text-yellow-100 bg-yellow-500',
  orange: 'text-orange-100 bg-orange-500',
}

const SkillBadge = ({ text, theme }: SkillBadgeType) => {
  return (
    <div
      className={`min-w-max p-4 font-bold text-xl rounded-full ${skillThemeVariants[theme]}`}
    >
      {text}
    </div>
  )
}

export default SkillBadge

Here's the error I'm getting:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ blue: string; sky: string; yellow: string; orange: string; }'.
  No index signature with a parameter of type 'string' was found on type '{ blue: string; sky: string; yellow: string; orange: string; }'.ts(7053)

I have also attached a screenshot of the error with this post.

Any explanation would be highly appreciated.

Screenshot_from_2023-05-08_00-50-43.png
dense tulip
#

change theme: string to theme: keyof typeof skillThemeVariants

#

string is too wide of a type, only the keys of that object are valid values to index it with

wooden wigeon
#

Thank you 🥳. It's now working.

dense tulip
#

yw!