注释从这开始~
总览
当咱们没有为函数组件或者类组件的 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 经常出现故障,重启有时会解决问题。