注释从这开始~

总览

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

装置类型文件

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

# ️ with NPMnpm install --save-dev @types/react @types/react-dom# ----------------------------------------------# ️ with YARNyarn 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.tsxinterface 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 anyfunction 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.tsximport 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.tsximport React from 'react';// ️ type checking disabled for props and stateclass 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.jsonrm -rf node_modulesrm -f package-lock.json# ️ clean npm cachenpm cache clean --forcenpm install

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