迹忆客 专注技术分享

当我们不键入函数或类组件的属性或忘记为React安装 typing 时，React.js会出现错误“Parameter 'props' implicitly has an 'any' type”。 要解决该错误，明确设置了组件中的 props 对象的类型。

我们应该确保的第一件事是已经安装了 React 的 typing。 在项目的根目录（package.json 文件所在的位置）中打开终端并运行以下命令。

# 👇️ 使用 NPM
$ npm install --save-dev @types/react @types/react-dom

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

# 👇️ 使用 YARN
$ yarn add @types/react @types/react-dom --dev

尝试重新启动 IDE 和 服务。

如果这没有帮助，那就是可能忘记显式键入函数或类组件的 props。以下是产生上述错误的示例代码。

// ⛔️ 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="jiyik.com" age={30} country="China" />
    </div>
  );
}

export default App;

上面代码片段的问题是我们没有为函数组件中的 props 设置类型。

为了解决这个错误，我们必须显式地输入 props 参数。

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

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="jiyik.com" age={30} country="China" />
    </div>
  );
}

export default App;

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

我们不必设置 children 属性，但如果我们将 children 传递给组件，则必须这样做。

如果我们不想为组件显式键入 props 对象，则可以使用 any 类型。

// 👇️ 设置为 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="jiyik.com" age={30} country="China" />
    </div>
  );
}

export default App;

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

如果我们有一个类组件，请使用泛型来键入它的 props 和 state 。

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 类型。

import React from 'react';

// 👇️ 对 props 和 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。

# 👇️ 删除 node_modules 和 package-lock.json
$ rm -rf node_modules
$ rm -f package-lock.json

# 👇️ 清除 npm 缓存
$ npm cache clean --force

$ npm install

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