关于react.js:React报错之Parameter-props-implicitly-has-an-any-type

注释从这开始~

总览

当咱们没有为函数组件或者类组件的 props 申明类型，或遗记为 React 装置类型申明文件时，会产生 ”Parameter ‘props’ implicitly has an ‘any’ type” 谬误。为了解决这个谬误，在你的组件中明确地为 props 对象设置一个类型。

装置类型文件

你首先要确定的是你曾经装置了 React 类型申明文件。在我的项目的根目录下关上终端，并运行以下命令。

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

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

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

尝试重启你的 IDE 和开发服务。

申明类型

如果这没有帮忙，你有可能遗记明确地为函数组件或类组件的 props 申明类型。

// App.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 参数类型。

// App.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 显示地申明了一个接口，这就能够解决谬误。

咱们不须要设置 children 属性，但如果你向你的组件传递children，你就必须这样做。

如果你不想为你的组件明确地申明 props 对象类型，那么你能够应用 any 类型。

// App.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，并拜访对象上的属性，而不会失去任何类型查看谬误。

泛型

如果你有一个类组件，能够应用泛型来为其 props 和state申明类型。

// App.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 和state提供了类型，这就解决了这个谬误。

如果你不想明确地为你的组件的 props 和state提供类型，你能够应用 any 类型。

// App.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;

咱们在输出 props 和state对象时应用了 any 类型，这无效地敞开了类型查看。

当初你将可能拜访 this.props 和this.state对象上的任何属性而不会失去类型查看谬误。

重新安装

如果谬误没有解决，尝试删除你的 node_modules 和package-lock.json（不是 package.json）文件，从新运行npm install 并重新启动你的 IDE。

# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

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

npm install

如果谬误依然存在，请确保重新启动你的 IDE 和开发服务。VSCode 经常出现故障，重启有时会解决问题。