Проблемы с типизацией пропса React, состоящего из массива объектов

Question

Есть простой компонент, принимающий пропс из массива объектов:

import React from 'react';
import {INavProps} from "../types";

const Nav: React.FC<INavProps[]> = props => {
    return (
        <nav>
            {
                props.map((item) => {
                    return <a key={item.id} href={item.link}>{item.title}</a>
                })
            }
        </nav>
    );
};

Тип пропса выглядит так:

export interface INavProps {
    id: number,
    title: string,
    link: string,
}

При попытке вставить компонент, IDE автоматом приписывает все родные JS-методы массива, которые якобы обязательно надо вписать:

<Nav length={} toString={} toLocaleString={} pop={} push={} concat={} join={} reverse={} shift={} slice={} sort={} splice={} unshift={} indexOf={} lastIndexOf={} every={} some={} forEach={} map={} filter={} reduce={} reduceRight={} find={} findIndex={} fill={} copyWithin={} [Symbol.iterator]={} entries={} keys={} values={} [Symbol.unscopables]={} includes={} flatMap={} flat={}

TS2740: Type '{ length: any; toString: any; toLocaleString: any; pop: any; push: any; concat: any; join: any; reverse: any; shift: any; slice: any; sort: any; splice: any; unshift: any; indexOf: any; lastIndexOf: any; every: any; ... 9 more ...; copyWithin: any; }' is missing the following properties from type 'INavProps[]': entries, keys, values, includes, and 4 more.

Как правильно типизировать такой пропс?

Answer 1

Нужно разделить тип элемента массива и тип пропсов:

export interface INavItem {
    id: number,
    title: string,
    link: string,
}
export interface INavProps {
    items: INavItem[],
}

В компоненте:

const Nav: React.FC<INavProps> = props => {
    return (
        <nav>
            {
                props.items.map((item) => {
                    return <a key={item.id} href={item.link}>{item.title}</a>
                })
            }
        </nav>
    );
};

БЛОГ НА HUSL

Проблемы с типизацией пропса React, состоящего из массива объектов

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