TypeScript React przekazywanie propsów

Question

Witam, mam problem z przekazywaniem propsów jako obiekt. Większość tutoriali jest z przekazywaniem pojedyńczo wartości a nie obiektów. Przy przekazywaniu obiektu otrzymuje błąd:

Type '{ worker: { Name: string; Task: { Date: string; Project: string; Hours: number; Descriptions: string; }[]; }; }' is not assignable to type 'IntrinsicAttributes & Worker'.
Property 'worker' does not exist on type 'IntrinsicAttributes & Worker'.ts(2322)

 

const Main = () => {

    let Andrzej = {
        Name: "Andrzej",
        Task: [{
            Date: "13.02.2020",
            Project: "React",
            Hours: 5,
            Descriptions: "Nic nie robiłem",
        },{
            Date: "13.02.2020",
            Project: "TypeScript",
            Hours: 3,
            Descriptions: "Nic nie robiłem",
        }]};

    return (
        <div className='main'>
             <Table3 worker={Andrzej}></Table3> 
        </div>
    );
}

export default Main;

 

 

Component:

import React from "react";

type Worker = {
    Name: string,
    Task: Array<Info>,
}

type Info = {
    Date: string,
    Project: string,
    Hours: number,
    Descriptions: string,
}

const Table3 = (worker:Worker) => {

    return (
        <> <div className="tbl-header">

            <h1>{worker.Name}</h1>
            <table>
                <tr>
                    <th>Date</th>
                    <th>Project</th>
                    <th>Hours</th>
                    <th>Description</th>
                </tr>
                {worker.Task.map(x => (
                <tr>
                    <td>{x.Date}</td>
                    <td>{x.Project}</td>
                    <td>{x.Hours}</td>
                    <td>{x.Descriptions}</td>
                </tr>
                ))}
            </table>
        </div>
        </>
    );
};

export default Table3

Answer 1

Na oko, powinieneś rozpakować worker z propsów, które otrzymuje komponent Table3:

const Table3 = ({ worker }: { worker: Worker }) => {

 

Comments

+1

A najlepiej użyć od razu typu FC z React ;) 

const Table3: React.FC<{ worker: Worker }> = ({ worker }) => {

Od razu będziemy bezpieczniejsi odnośnie zwracanego typu ;) 

---

React.FC ma wady, o których warto wspomnieć.

---

Dokładnie, lepiej typować bezpośrednio { props...}: ComponentPropsType lub przy użyciu React.memo<ComponentPropsTyle>, a children otypowac jako React.ReactNode

---

Ok wiem że FC typuje dzieci jednak porównajmy szkodliwość :) 

Gdy mamy otypowane dzieci których nie używamy jedyne co nas spotyka to martwy kod którego nie widzimy. 

Gdy zwracamy zły typ z komponentu funkcyjnego nasza aplikacja może się wywalić na produkcji. 

W mojej ocenie błąd na produkcji jest gorszy niż martwy kod ;) 

Dodatkowo Twój link podaje tylko jeden plus używania FC a jest jeszcze drugi. Można sobie wyciągać propsy z komponentów za pomocą infer ;) 
 U siebie w kodzie mam takie cudo :) 

export type ModalProps = {
    [P in ModalTypes]?: ModalType[P] extends React.FC<infer T> ? Omit<T, 'close' | 'isOpen'> : any;
};

Gdybym nie stosował FC miałbym lekki problem żeby z tego skorzystać. 

---

Gdy zwracamy zły typ z komponentu funkcyjnego nasza aplikacja może się wywalić na produkcji. 

Jaki zły typ? 

Answer 2

Dziękuję wszystkim za odpowiedź

Comments

Oznacz odpowiedź @ScriptyChris jako najlepszą i zamknij pytanie