Как правильно задать тип параметру в функции map?

Question

Столкнулся с такой проблемой, пытаюсь вывести меню в реакте и задать параметру функции map нужный тип. Делаю следущим образом:

interface Navigation {
    text: String
}

const Controls: React.FC = () => {
    return (
        <ul className="controls">
            {CONTROLS_NAV.map((title: Navigation) => {
                return (
                    <li className="controls_item">
                        <a href="#" className="controls_link active_state">{title.text}</a>
                    </li>
                )
            })}
        </ul>
    )
};

CONTROLS_NAV ипортируется с другого файла, это обычный массив объектов.

export const CONTROLS_NAV: Array<Object> = [
    {
        text: 'Card View',
    },
    {
        text: 'List View'
    },
    {
        text: 'Add Customer'
    }
];

Но почему-то здесь выдается ошибка, . Если же поле text в интерфейсе Navigation поставить как необязательное, то ошибки этой нет. Подскажите пожалуйста что я делаю не так? Как заставить этот код работать с обязательным полем text?

Answer 1

Типы Array<Object> и Navigation несовместимы

Вот как нужно (типы можно тоже экспортировать).

interface Navigation {
  text: string
}

export const CONTROLS_NAV: Navigation[] = [
  {
    text: 'Card View',
  },
  {
    text: 'List View',
  },
  {
    text: 'Add Customer',
  },
]

const Controls: React.FC = () => {
  return (
    <ul className='controls'>
      {CONTROLS_NAV.map((title: Navigation) => {
        return (
          <li className='controls_item'>
            <a href='#' className='controls_link active_state'>
              {title.text}
            </a>
          </li>
        )
      })}
    </ul>
  )
}

Navigation в map тоже можно убрать.

БЛОГ НА HUSL

Как правильно задать тип параметру в функции map?

Ответы (1 шт):