Tengo problemas para convertir este fragmento de código a mecanografiado, ya que soy un novato con TS.
import React from 'react'; import './Coin.css'; type Coin = { name : string; price : string; symbol: string; marketcap: string; volume: string; image: string; priceChange: string; } { return ( <div className='coin-container'> <div className='coin-row'> <div className='coin'> <img src={image} alt='crypto' /> <h1>{name}</h1> <p className='coin-symbol'>{symbol}</p> </div> <div className='coin-data'> <p className='coin-price'>€{price}</p> <p className='coin-volume'>€{volume.toLocaleString()}</p> {priceChange < 0 ? ( <p className='coin-percent red'>{priceChange.toFixed(2)}%</p> ) : ( <p className='coin-percent green'>{priceChange.toFixed(2)}%</p> )} <p className='coin-marketcap'> Mkt Cap: ${marketcap.toLocaleString()} </p> </div> </div> </div> ); }; export default Coin;Sé que tengo que cambiar este fragmento de código:
const Coin = ({ name, price, symbol, marketcap, volume, image, priceChange }) => { return (porque VSCode me da errores, pero no estoy seguro de cómo declararlo y luego pasarlo a la función de retorno. He intentado esto:
type Coin = { name : string; price : string; symbol: string; marketcap: string; volume: string; image: string; priceChange: string; } y me da el error de que A 'return' statement can only be used within a function body.
Primero debe declarar sus tipos en una interfaz o un tipo (es mejor que sea una interfaz, porque las interfaces son sencillas y pueden extenderse cuando necesite extender un tipo. Luego declare una const con el tipo Functional Component (aquí está React .FC) pasando el tipo props como genérico (los tipos dentro de <> se llaman genéricos).
Ahora puede usar las entradas sin necesidad de declarar tipos nunca más. (asegúrese de que su tipo de archivo sea .tsx , porque los archivos .tsx son archivos Typescript compatibles con React JSX.
interface CoinProps { name: string; price: string; symbol: string; marketcap: string; volume: string; image: string; priceChange: string; } const Coin: React.FC<CoinProps> = ({ image,marketcap,name,price,priceChange,symbol,volume }) => { return ( <div className="coin-container"> <div className="coin-row"> <div className="coin"> <img src={image} alt="crypto" /> <h1>{name}</h1> <p className="coin-symbol">{symbol}</p> </div> <div className="coin-data"> <p className="coin-price">€{price}</p> <p className="coin-volume">€{volume.toLocaleString()}</p> {priceChange < 0 ? ( <p className="coin-percent red">{priceChange.toFixed(2)}%</p> ) : ( <p className="coin-percent green">{priceChange.toFixed(2)}%</p> )} <p className="coin-marketcap"> Mkt Cap: ${marketcap.toLocaleString()} </p> </div> </div> </div> ); }; export default Coin;Por cierto, el cambio de precio debería ser un número.