<p>我正在嘗試輸入條件渲染，但是它報錯了：<code>Element implicitly has an 'any' type because expression of type 'number' can't be used to index type 'types'. No index signature' can't be used to index type 'types'. No index signature with a parameter of type 'number' was found on type 'types'.</code> 當所有內容都是"any"時，渲染是有效的。 </p> <pre class="brush:php;toolbar:false;">interface types { '0': JSX.Element; '1': JSX.Element; '2': JSX.Element; } export default function Economy(props: any) { const [step, setStep] = useState(0) const render = () => { const component: types = { '0': <Home />, '1': <Create />, '2': <Detail />, } return component[step] } return ( {render()} )</pre> <p>有人能幫我理解如何為這個條件渲染添加類型嗎？ </p> <p>我需要理解如何為這個條件渲染添加類型</p>

interface types {
  '0': JSX.Element;
  '1': JSX.Element;
  '2': JSX.Element;
}

export default function Economy(props: any) {
  const [step, setStep] = useState<keyof types>("0")

  const render = () => {
    const component: types = {
      '0': <Home />,
      '1': <Create />,
      '2': <Detail />,
    }
    return component[step]
  }
return (
   {render()}
)

const [step, setStep] = useState<keyof types>(0)

interface types {
  0: JSX.Element;
  1: JSX.Element;
  2: JSX.Element;
}
 const component: types = {
      0: <Home />,
      1: <Create />,
      2: <Detail />,
    }
 return component[step] // 没有错误