带有参数的函数不会在 VS 代码中显示

Question

目标：
允许使用参数值为“Test 2”的函数 Test2，然后在 Visual Studio 代码中无任何错误地显示。

问题：
当我应用代码“”和“function Test2”时，它显示一条错误消息

Compiled with problems:X

ERROR in src/App.tsx:11:18

TS7006: Parameter 'props' implicitly has an 'any' type.
     9 |   }
    10 |
  > 11 |   function Test2(props) {
       |                  ^^^^^
    12 |     return <h1>{props.thename} works!</h1>;
    13 |   }
    14 |

我错过了哪一部分才能在 VS 代码中工作？

信息：
*ReactTS 新手
*它适用于 stackblitz 但不适用于 VS Code ()
*https://stackblitz.com/edit/react-ts-atrrsi?file=index.tsx

谢谢！

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

export default function App() {

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

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

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

        <Test1 />
        <Test2 thename={'Test 2'} />        
      </header>
    </div>
  );
}

Answer 1

在 Typescript 中，如果您不为函数分配参数类型，它将自动分配为任意类型。但是，如果您不更改打字稿的默认配置，则此类型分配将引发错误。这不仅限于 jsx，这就是 TS 的工作方式。

有几种方法可以解决这个问题。

为您的参数定义接口并将其设置为类型：

interface Props {
    thename: string;
}

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

这是最好的选择。

明确分配任何类型：

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

更改 tsconfig.json 并允许隐式任何。

PS: 不应在另一个组件内定义组件。每个组件都应该在顶层定义（就像您的 App 组件一样）。

带有参数的函数不会在 VS 代码中显示

Function with argument won't display in VS Code

visual-studio-code

react-tsx