使用 Object.keys 從映射對象輸出鍵/值時出現打字稿錯誤

Question

嘗試映射錯誤對象並顯示鍵值和鍵作為錨點 href 時，我在 React 應用程序中收到以下 Typescript 錯誤。

Element implicitly has an 'any' type because expression of type '"errors"' can't be used to index type '{ paid?: string | undefined; }'.
  Property 'errors' does not exist on type '{ paid?: string | undefined; }'.ts(7053)

下面是組件

interface ErrorProps {
  errors: {
    paid?: string
  }
}

function Error(props: ErrorProps) {
  return (
    <ul>
      {props.errors && Object.keys(props.errors).map(key => {
        return (
          <li key={key}>
            <a href={`#${key}`}>
              {props.errors[key as keyof ErrorProps.errors]} // The error is on this line
            </a>
          </li> 
        )
      })}
    </ul>
  )
}

以下是傳遞給 Errors 組件的 Props：

errors: {paid: "Paid must be a number"}

我試圖在結果 HTML 中得到的內容如下：

<a href="#paid">Paid must be a number</a>

非常感謝。

Answer 1

ErrorProps.errors是一種類型，而不是命名空間。 考慮更改檢索嵌套類型的方式。

{props.errors[key as keyof ErrorProps['errors']]}