参数 ‘props’ 在 React 中隐式具有 ‘any’ 类型

作者

参数 ‘props’ 在 React 中隐式具有 ‘any’ 类型

Parameter ‘props’ implicitly has ‘any’ type in React

React.js 错误“Parameter ‘props’ implicitly has an ‘any’ type”发生在我们没有键入函数或类组件的 props 或忘记为 React 安装类型时。

props要解决该错误，请在组件中显式设置对象的类型。

参数 props 隐式具有任何类型

首先，确保你已经安装了 React 的类型。在项目的根目录（文件所在的位置）中打开终端package.json并运行以下命令。

壳
# 👇️ with NPM
npm install --save-dev @types/react @types/react-dom

# ----------------------------------------------

# 👇️ with YARN
yarn add @types/react @types/react-dom --dev

尝试重新启动您的 IDE 和开发服务器。

显式输入props组件的

如果这没有帮助，很可能是您忘记了显式键入
props函数或类组件的类型。

应用程序.tsx
// ⛔️ Parameter 'props' implicitly has an 'any' type.ts(7006)
function Person(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <h2>{props.age}</h2>
      <h2>{props.country}</h2>
    </div>
  );
}

function App() {
  return (
    <div>
      <Person name="James" age={30} country="Australia" />
    </div>
  );
}

export default App;

props问题是我们还没有在函数组件中设置类型。

要解决错误，我们必须显式键入参数props。

应用程序.tsx
interface PersonProps {
  name: string;
  age: number;
  country: string;
  children?: React.ReactNode; // 👈️ for demo purposes
}

function Person(props: PersonProps) {
  return (
    <div>
      <h2>{props.name}</h2>
      <h2>{props.age}</h2>
      <h2>{props.country}</h2>
    </div>
  );
}

function App() {
  return (
    <div>
      <Person name="James" age={30} country="Australia" />
    </div>
  );
}

export default App;

我们定义了一个接口来显式键入组件的 props，从而解决了错误。

我们不必设置childrenprop，但如果将孩子传递给组件，则必须这样做。

如果您忘记键入一个event对象，您会得到
参数“事件”隐式具有“任何”类型
错误。

使用类型禁用类型any检查

如果你不想为你的组件显式地键入 props 对象，你可以使用 type any.

应用程序.tsx
// 👇️ set type to any
function Person(props: any) {
  return (
    <div>
      <h2>{props.name}</h2>
      <h2>{props.age}</h2>
      <h2>{props.country}</h2>
    </div>
  );
}

function App() {
  return (
    <div>
      <Person name="James" age={30} country="Australia" />
    </div>
  );
}

export default App;

该any类型
有效地关闭了类型检查，因此我们能够将 props 传递给组件并访问对象的属性，而不会出现任何类型检查错误。

输入一个类组件

如果你有一个类组件，使用泛型来输入它的属性和状态。

应用程序.tsx
import React from 'react';

interface PersonProps {
  name: string;
  age: number;
  country: string;
  children?: React.ReactNode;
}


interface PersonState {
  value: string;
}

// 👇️ React.Component<PropsType, StateType>
class Person extends React.Component<PersonProps, PersonState> {
  render() {
    return (
      <div>
        <h2>{this.props.name}</h2>
        <h2>{this.props.age}</h2>
        <h2>{this.props.country}</h2>
      </div>
    );
  }
}

export default function App() {
  return (
    <div>
      <Person name="James" age={30} country="Australia" />
    </div>
  );
}

我们明确地提供了 props 的类型和组件的状态。

禁用类组件的类型检查

如果你不想显式地输入组件的属性和状态，你可以使用 type any.

应用程序.tsx
import React from 'react';

// 👇️ type checking disabled for props and state
class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);

    this.state = {value: ''};
  }

  handleChange = (event: any) => {
    this.setState({value: event.target.value});
  };

  render() {
    return (
      <div>
        <form>
          <input
            onChange={this.handleChange}
            type="text"
            value={this.state.value}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

我们any在键入props和state对象时使用了类型，这有效地关闭了类型检查。

现在您可以访问this.props 和this.state对象的任何属性而不会出现类型检查错误。

删除您的 node_modules 并重新安装您的依赖项

如果错误未解决，请尝试删除您的node_modules和
package-lock.json（不是
package.json）文件，重新运行npm install并重新启动您的 IDE。

bash如果您使用的是 macOS 或 Linux，请在或中发出以下命令zsh。

壳
#  for macOS and Linux
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

如果您使用的是 Windows，请在 CMD 中发出以下命令。

命令
# for Windows
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

如果错误仍然存​​在，请确保重新启动 IDE 和开发服务器。VSCode 经常出现故障，有时重启可以解决问题。