如何將數組與打字稿中的對象映射

Question

嗨，我正在嘗試填充由界面制作的對象：

export interface MainInfo {
    speaks: Array<Object>
}

然后在組件中我像這樣填充它：

import { MainInfo } from '../../interfaces/Interface';

export const UserCard: React.FC = () => {
let mainInfo: MainInfo = {
    speaks:  [
      {
        "language": "Ukrainian",
        "level": "Native"
      },
      {
        "language": "Russian",
        "level": "Fluent"
      }
    ]
  }
return(
<>
 {mainInfo.speaks.map((speaksInfo, id) => {
     return (
        <div className="languages" key={id}>
           <p>{speaksInfo.language}</p>
           <p>{speaksInfo.level}</p>
        </div>
     );
 })}
</>
);
};

但數組不映射，我有錯誤

Property 'level' does not exist on type 'Object'.  TS2339
   <p>{speaksInfo.level}</p>
                  ^

我該如何解決這個問題？

Answer 1

您可以嘗試使用更好的 MainInfo 類型，如下所示：

export interface MainInfo {
    speaks: {
        language: string;
        level: string;
    }[]
}