Typage object

floriqn
Javascript React

Bonjour à tous,

J'essaye de me former à TS en suivant la nouvelle formation React pour l'adapter au typage offert par TS.

Néanmoins je sèche sur certains cas que je n'arrive pas résoudre ou comprendre.

Ci-dessous une interface Product puis un array d'objets typé de la facon const productsList: Product[] :

interface Product {
    category: string;
    price: string;
    stocked: boolean;
    name: string;
}

const productsList: Product[] = [
    { category: 'Fruits', price: '$1', stocked: true, name: 'Apple' },
    { category: 'Fruits', price: '$1', stocked: true, name: 'Dragonfruit' },
    { category: 'Fruits', price: '$2', stocked: false, name: 'Passionfruit' },
    { category: 'Vegetables', price: '$2', stocked: true, name: 'Spinach' },
    { category: 'Vegetables', price: '$4', stocked: false, name: 'Pumpkin' },
    { category: 'Vegetables', price: '$1', stocked: true, name: 'Peas' },
];

Dans la fonction App je vais passer la const productsList: Product[] en param => OK :

function App() {
    return (
        ...
                <ProductTable products={productsList} />
        ...
}

Puis dans la fonction ProductTable :

function ProductTable({ products }: Product[]) {
    ...
}

En typant de cette façon, j'obtiens l'erreur : La propriété 'products' n'existe pas sur le type 'Product[]'.

De cette autre façon c'est OK : 

function ProductTable({ products }: { products: Product[] }) {
    ...
}

J'avais cru comprendre qu'en déclarant un type ou une interface, je ne serai pas obligé de typer mon param de la seconde façon.

Ai-je mal compris ou manque t-il quelque chose dans mon code pour la première façon de faire.

Merci à vous

1 réponse

Smith john

Hello, tu dois forcément specifier quelle props est de type Product[].

Je peux comprendre que la concretement étant donné qu'il n'y a qu'une props tu ne vois pas l'interêt de le faire de la second façon.

Mais par exemple si demain ton composant ProductTable prend une second propriétée.

<ProductTable products={productsList} onClick={onClick} />

Si tu le fait de la premiere maniere penses-tu que onClick est de type Product[] ?

function ProductTable({ products, onClick }: Product[]) {
    ...
}

La réponse est évidente et donc tu es forcé de préciser le type de chaque props.

function ProductTable({ products, onClick }: { products: Product[], onClick: () => void }) {
    ...
}

Apres tu as surement du voir ceci est c'est peut-être pour cela que tu confond

type ProductTablProps = {
   products: Product[]
}

function ProductTable({ products }: ProductTablProps) {
    ...
}

et la effectivement tu ne passes bien qu'un type mais celui-ci doit quand même dans sa déclaration contenir toutes les props.