Как правильно написать интерфейс для пропсов?

Question

[Alex Ozerov]

В компонент MainTable приходит массив обьектов. Мне нужно перебрать массив и подставить значения в таблицу, но если итерировать массив методом map, например:

{data.map((element, index) => {
                console.log(element)
                return <tr key={index}>
                    <th scope="row">{index}</th>
                    <td>{element.title}</td>
                    <td> J. K. Rowling</td>
                    <td>8946472</td>
                    <td>
                        <button type="button" className="btn btn-primary mr-2">Edit</button>
                        <button type="button" className="btn btn-danger">Delete</button>
                    </td>
                </tr>
            })}

то при обращении типа element.title я получаю ошибку:

Property 'title' does not exist on type 'object'.

Main.tsx

import React, {useContext} from 'react';
import NavBar from '../components/NavBar';
import MainTable from '../components/MainTable';
import {BookContext} from '../context/bookContext';

const Main = () => {
    const books = useContext(BookContext) // will be [{title: 'Name,  author: 'Name'}]
    return (
        <div className='main'>
            <NavBar />
            <MainTable data={books} />
        </div>
    );
};

export default Main;

MainTable.tsx

import React from 'react';

interface IMainTableProps {
    data: object[]
}

const MainTable = ({data}: IMainTableProps) => {
    console.log(data)

    return (
        <table className="table container mt-3">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">ISBN</th>
                <th scope="col">Handlers</th>
            </tr>
            </thead>
            <tbody>
            {data.map((element, index) => {
                console.log(element)
                return <tr key={index}>
                    <th scope="row">{index}</th>
                    <td>{element.title}</td> // Здесь уже ошибка
                    <td> J. K. Rowling</td>
                    <td>8946472</td>
                    <td>
                        <button type="button" className="btn btn-primary mr-2">Edit</button>
                        <button type="button" className="btn btn-danger">Delete</button>
                    </td>
                </tr>
            })}
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>
                    <button type="button" className="btn btn-primary mr-2">Edit</button>
                    <button type="button" className="btn btn-danger">Delete</button>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td >Larry the Bird</td>
                <td>@twitter</td>
                <td>@twitter</td>
                <td>
                    <button type="button" className="btn btn-primary mr-2">Edit</button>
                    <button type="button" className="btn btn-danger">Delete</button>
                </td>
            </tr>
            </tbody>
        </table>
    );
};

export default MainTable;

Comments

[WbICHA]

data: object[]

Великолепная типизация, Алекс. Просто охрененная, если я правильно понял. Надёжная, как швейцарские часы.

[WbICHA]

object[] = {}[]

[Alex Ozerov]

WbICHA, ну да, это вообще прям шикарный ответ, как моя типизация, к тому же и не верный

[WbICHA]

Alex Ozerov, и где же он неверный? У тебя дата не типизирована, по сути, поэтому непонятно чего ты от неё хочешь.

[Alex Ozerov]

WbICHA, так если внимательно прочитать вопрос, то станет ясно что я от нее хочу

[WbICHA]

Alex Ozerov, я понял. Программирование не твоё.

[G F]

Alex Ozerov, замени object на интерфейс в которм будут описаны твои поля например

interface IMainTableProps {
    data: MyDataObject[]
}

interface MyDataObject {
  title: string;
  kids: number;
  isPsychologicallyStable: boolean;
  // etc...
}

[Alex Ozerov]

G F, ,благодарю

Answer 1

[Дмитрий Беляев]

interface IMainTableProps {
    data: {
        title: string;
    }[];
}