TypeScript: как решить ошибку «свойство не существует для типа» для массивов?

Question

Я новичок в TypeScript / React. Я получаю следующее сообщение об ошибке при попытке передать реквизиты как массив компоненту.

Я вызываю компонент как таковой:

return <ContactInfoBlock contactInfo={contact} />;

где contact - массив информации, например:

const contact = {
  contactName: 'Jim',
  contactAvatar: 'jim.png',
  contactEmail: 'jim@jim.com',
  contactPhone: '1234 4566',
};

И в моем файле компонентов у меня есть:

type ContactInfoInterface = {
  contactName: string;
  contactEmail: string;
  contactPhone: string;
};

interface ContactInfoBlockProps {
  contactInfo: ContactInfoBlock[];
}

const ContactInfoBlock = ({ contactInfo }: ContactInfoBlockProps) => {

 return (
   <Typography variant="h6">
     {contactInfo.contactName}
   </Typography>
   //etc

Это работает - данные фактически появляются в интерфейсе. Но я получаю предупреждение:

Свойство contactName не существует для типа ContactInfoInterface [] '. TS2339

Согласно руководствам, которые я следил, это должно работать. Но я все равно получаю сообщение об ошибке.

Кто-нибудь знает, что я могу сделать?

Answer 1

Это работает - дата фактически отображается в интерфейсе

Это означает, что ваша подпись TypeScript неверна.

Fix

Должно быть:

interface ContactInfoBlockProps {
  contactInfo: ContactInfoBlock;
}

т.е. это не массив , так как contactInfo.contactName работает во время выполнения