[英]Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'BGColors'
I am trying to convert the following React component to TypeScript:我正在尝试将以下 React 组件转换为 TypeScript:
import clsx from 'clsx'
type BGColors = {
amber: string
emerald: string
fuchsia: string
indigo: string
lightBlue: string
purple: string
rose: string
}
const codeBackground: BGColors = {
amber: 'bg-amber-500',
emerald: 'bg-emerald-500',
fuchsia: 'bg-fuchsia-400',
indigo: 'bg-indigo-400',
lightBlue: 'bg-light-blue-500',
purple: 'bg-purple-400',
rose: 'bg-rose-400',
}
const previewBackground: BGColors & { gray: string } = {
amber: 'bg-gradient-to-r from-amber-50 to-amber-100',
emerald: 'bg-gradient-to-r from-emerald-50 to-teal-100',
fuchsia: 'bg-gradient-to-r from-fuchsia-50 to-fuchsia-100',
gray: 'bg-gradient-to-r from-gray-50 to-gray-100',
indigo: 'bg-gradient-to-r from-indigo-50 to-indigo-100',
lightBlue: 'bg-gradient-to-r from-light-blue-50 to-light-blue-100',
purple: 'bg-gradient-to-r from-purple-50 to-purple-100',
rose: 'bg-gradient-to-r from-rose-50 to-rose-100',
}
type CodeSampleProps = {
preview: string
snippet: string
previewClassName: string
color: string
}
export const CodeSample = ({
preview,
snippet,
previewClassName,
color = 'gray',
}: CodeSampleProps) => {
return (
<div className="relative mb-8 overflow-hidden">
<div
className={clsx(
'rounded-t-xl overflow-hidden',
previewBackground[color],
previewClassName,
{
'p-10': !previewClassName,
}
)}
dangerouslySetInnerHTML={{ __html: preview }}
/>
<div
className={clsx('overflow-hidden rounded-b-xl', codeBackground[color], {
'bg-gray-800': !codeBackground[color],
})}
>
<pre
className={clsx(
'scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html text-white',
{
'bg-black bg-opacity-75': codeBackground[color],
}
)}
>
<code className="language-html" dangerouslySetInnerHTML={{ __html: snippet }} />
</pre>
</div>
</div>
)
}
It gives me the following error on codeBackground[color]
:它在
codeBackground[color]
上给了我以下错误:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'BGColors'.
元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引类型“BGColors”。 No index signature with a parameter of type 'string' was found on type 'BGColors'.ts(7053)
在 'BGColors'.ts(7053) 类型上未找到具有“字符串”类型参数的索引签名
I also get 3 other errors on anything that uses [color]
,ie, previewBackground[color]
& codeBackground[color]
在使用
[color]
的任何内容上,我还会遇到 3 个其他错误,即previewBackground[color]
& codeBackground[color]
How do I solve it?我该如何解决?
I think there was a bug in the code as I just copied it from someone's JS project.我认为代码中存在错误,因为我只是从某人的 JS 项目中复制了它。 TS made me catch the error.
TS 让我发现了错误。
I changed my code to check if gray
exists on codeBackground[color]
& it got rid of the error.我更改了代码以检查
codeBackground[color]
上是否存在gray
,它消除了错误。
Here's the code:这是代码:
import clsx from 'clsx'
type BGColors = {
amber: string
emerald: string
fuchsia: string
gray: string
indigo: string
lightBlue: string
purple: string
rose: string
}
const codeBackground: Omit<BGColors, 'gray'> = {
amber: 'bg-amber-500',
emerald: 'bg-emerald-500',
fuchsia: 'bg-fuchsia-400',
// gray: 'bg-gray-400',
indigo: 'bg-indigo-400',
lightBlue: 'bg-light-blue-500',
purple: 'bg-purple-400',
rose: 'bg-rose-400',
}
const previewBackground: BGColors = {
amber: 'bg-gradient-to-r from-amber-50 to-amber-100',
emerald: 'bg-gradient-to-r from-emerald-50 to-teal-100',
fuchsia: 'bg-gradient-to-r from-fuchsia-50 to-fuchsia-100',
gray: 'bg-gradient-to-r from-gray-50 to-gray-100',
indigo: 'bg-gradient-to-r from-indigo-50 to-indigo-100',
lightBlue: 'bg-gradient-to-r from-light-blue-50 to-light-blue-100',
purple: 'bg-gradient-to-r from-purple-50 to-purple-100',
rose: 'bg-gradient-to-r from-rose-50 to-rose-100',
}
type CodeSampleProps = {
preview: string
snippet: string
previewClassName: string
color: keyof BGColors
}
export const CodeSample = ({
preview,
snippet,
previewClassName,
color = 'gray',
}: CodeSampleProps) => {
return (
<div className="relative mb-8 overflow-hidden">
<div
className={clsx(
'rounded-t-xl overflow-hidden',
previewBackground[color],
previewClassName,
{
'p-10': !previewClassName,
}
)}
dangerouslySetInnerHTML={{ __html: preview }}
/>
<div
className={clsx(
'overflow-hidden rounded-b-xl',
color === 'gray' ? '' : codeBackground[color],
{
'bg-gray-800': color === 'gray' ? '' : !codeBackground[color],
}
)}
>
<pre
className={clsx(
'scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html text-white',
{
'bg-black bg-opacity-75': color === 'gray' ? '' : codeBackground[color],
}
)}
>
<code className="language-html" dangerouslySetInnerHTML={{ __html: snippet }} />
</pre>
</div>
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.