Problem z dostaniem sie do property obiektu

0

Dzień dobry,
Uczę się Reacta + TypeScript z samouczka i mam taki oto problem:

const [product, setProduct] = useState("electricity");
const defaultProps = {
price: {
   electricity: 0.51,
   gas: 4.7,
   oranges: 3.79,
 },
};
 
const selectPrice = (select: any) => {
  console.log(defaultProps.price[select]);
};
const handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
  setProduct(e.target.value);
};
 
 <Cash price={selectPrice(product)} />
 <select value={product} onChange={handleSelect}>
   <option value="electricity">electricity</option>
   <option value="gas">gas</option>
   <option value="oranges">oranges</option>
 </select>

Problem jest w metodzie `selectPrice()``, bo wyświetla błąd

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ electricity: number; gas: number; oranges: number; }'.ts(7053)

Dodam, że w samouczku w którym jest używany JavaScript działa to bez problemu.

0

Dobra już rozwiązałem (z pomocą stackoverflow) używając select: 'electricity'| 'gas' | 'oranges'

1

Ustawiłeś tutaj select:any, więc dlatego TypeScript pokazuje taki komunikat.

const selectPrice = (select: any) => {
  console.log(defaultProps.price[select]);
};

zamień to na

const selectPrice = (select: keyof typeof defaultProps.price) => {
  console.log(defaultProps.price[select]);
};

Ogólnie powyższa zmiana wystarczy żeby naprawić problem, ale po tym jak definiujesz defaultPropsy to mam wrażenie, że używasz tego TypeScript'a w zły sposób.
Powinieneś korzystać z typów VFC, oraz FC, które dostarcza React.
VFC - jeśli komponent nie ma propsa children.
FC - przeciwieństwo VFC, więc używamy go jeśli komponent ma props children.

import React, { FC } from 'react';

interface Props {
  price: {
     electricity: number,
     gas: number,
     oranges: number,
  }
}

const TypescriptComponent: FC<Props>  = ({ 
   price = {  // <--- W taki sposób zazwyczaj stosuje się defaultProps w TypeScripcie
     electricity: 4.5, 
     gas: 10, 
     oranges: 15 
  },
  children
}) => {
   // Tutaj reszta kodu
   
   return (
     <>
       Tutaj HTML
       {children}
     </>
   );
};

export default TypescriptComponent;
0

Zmień artykuł z którego sie uczysz, za "any" powinni naprawde.... **&^^

0

To any wpisałem roboczo. Generalnie muszę chyba przerzucić się na jakiś kurs z udemy, który bezpośrednio uczy Reacta w TypeScript.
Widziałem wiele razy React.FC i tak dalej ale jakoś to pomijałem. Wezmę się porządnie za to.

1 użytkowników online, w tym zalogowanych: 0, gości: 1