Typage object

Par floriqn, il y a 2 ans

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, il y a 2 ans

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.