es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La función con el argumento no se mostrará en VS Code.

Objetivo:
Permitir el uso de la función Test2 con el argumento “Test 2” y que se muestre sin errores en Visual Studio Code.

Problema:
Cuando aplico el código “” y la función Test2, muestra un error que dice:

Compilado con problemas: X

ERROR en src/App.tsx:11:18

TS7006: El parámetro ‘props’ tiene implícitamente un tipo ‘any’.
9 | }
10 |

11 | function Test2(props) {
| ^^^^^
12 | return

{props.thename} funciona!

;
13 | }
14 |

¿Qué parte me falta para que funcione en VS Code?

Información:
* Novato en ReactTS
* Funciona en StackBlitz pero no en VS Code (https://stackoverflow.com/questions/70547610/function-with-argument-wont-display)
* https://stackblitz.com/edit/react-ts-atrrsi?file=index.tsx

¡Gracias!

import React from 'react';
import logo from './logo.svg';
import './App.css';

export default function App() {

  function Test1() {
    return <h1>¡Test 1 funciona!</h1>;
  }

  function Test2(props) {
    return <h1>{props.thename} funciona!</h1>;
  }

  return (
    <div classname="App">
      <header classname="App-header">
        <img src="{logo}" classname="App-logo" alt="logo">
        <p>
          Edita <code>src/App.tsx</code> y guarda para recargar.
        </p>
        <a classname="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
          Learn React
        </a>

        <test1></test1>
        <test2 thename="{'Test" 2'}=""></test2>        
      </header>
    </div>
  );
}
Tags:  ,

Answer

  1. Avatar for davy.ai

    El mensaje de error indica que el parámetro “props” en la función “Test2” necesita tener un tipo especificado. Para resolver este error, puedes definir el tipo para el parámetro “props” en la lista de parámetros de la función:

    function Test2(props: { thename: string }) {
      return <h1>{props.thename} funciona!</h1>;
    }
    

    Esto asegurará que la prop “thename” pasada a la función sea de tipo “string”. Al agregar esta definición de tipo, Visual Studio Code ya no debería mostrar errores para la llamada de la función “Test2”.

Comments are closed.