解決React報(bào)錯(cuò)Parameter 'props' implicitly has an 'any' type
總覽
當(dāng)我們沒有為函數(shù)組件或者類組件的props聲明類型，或忘記為React安裝類型聲明文件時(shí)，會(huì)產(chǎn)生"Parameter 'props' implicitly has an 'any' type"錯(cuò)誤。為了解決這個(gè)錯(cuò)誤，在你的組件中明確地為props對(duì)象設(shè)置一個(gè)類型。
安裝類型文件
你首先要確定的是你已經(jīng)安裝了React類型聲明文件。在項(xiàng)目的根目錄下打開終端，并運(yùn)行以下命令。
# ??? with NPM npm install --save-dev @types/react @types/react-dom # ---------------------------------------------- # ??? with YARN yarn add @types/react @types/react-dom --dev
嘗試重啟你的IDE和開發(fā)服務(wù)。
聲明類型
如果這沒有幫助，你有可能忘記明確地為函數(shù)組件或類組件的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;
上述代碼片段的問題在于，我們沒有為函數(shù)組件的props設(shè)置類型。
為了解決該錯(cuò)誤，我們必須顯示地props參數(shù)類型。
// 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;
我們?yōu)榻M件的props顯示地聲明了一個(gè)接口，這就可以解決錯(cuò)誤。
我們不需要設(shè)置children屬性，但如果你向你的組件傳遞children，你就必須這樣做。
如果你不想為你的組件明確地聲明props對(duì)象類型，那么你可以使用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類型有效地關(guān)閉了類型檢查，所以我們能夠向組件傳遞props，并訪問對(duì)象上的屬性，而不會(huì)得到任何類型檢查錯(cuò)誤。
泛型
如果你有一個(gè)類組件，可以使用泛型來為其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提供了類型，這就解決了這個(gè)錯(cuò)誤。
如果你不想明確地為你的組件的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;
我們?cè)谳斎?code>props和state對(duì)象時(shí)使用了any類型，這有效地關(guān)閉了類型檢查。
現(xiàn)在你將能夠訪問this.props和this.state對(duì)象上的任何屬性而不會(huì)得到類型檢查錯(cuò)誤。
重新安裝
如果錯(cuò)誤沒有解決，嘗試刪除你的node_modules和package-lock.json（不是package.json）文件，重新運(yùn)行npm install并重新啟動(dòng)你的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
如果錯(cuò)誤仍然存在，請(qǐng)確保重新啟動(dòng)你的IDE和開發(fā)服務(wù)。VSCode經(jīng)常出現(xiàn)故障，重啟有時(shí)會(huì)解決問題。
翻譯原文鏈接：bobbyhadz.com/blog/react-…
以上就是解決React報(bào)錯(cuò)Parameter 'props' implicitly has an 'any' type的詳細(xì)內(nèi)容，更多關(guān)于React 報(bào)錯(cuò)解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了React日期時(shí)間顯示組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了react+redux仿微信聊天IM實(shí)例|react仿微信界面 ，本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
詳解在React中跨組件分發(fā)狀態(tài)的三種方法
這篇文章主要介紹了詳解在React中跨組件分發(fā)狀態(tài)的三種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
React實(shí)現(xiàn)表單提交防抖功能的示例代碼
在 React 應(yīng)用中,防抖（Debounce）技術(shù)可以有效地限制函數(shù)在短時(shí)間內(nèi)的頻繁調(diào)用,下面我們就來看看如何使用Lodash庫中的debounce函數(shù)實(shí)現(xiàn)React表單提交中實(shí)現(xiàn)防抖功能吧2024-01-01
react歷次版本迭代主要想解決的是兩類導(dǎo)致網(wǎng)頁卡頓的問題，分別是cpu密集型任務(wù)和io密集型任務(wù)導(dǎo)致的卡頓問題，react18新增特性就是為了解決上述問題2022-09-09
本篇文章主要介紹了create-react-app修改為多頁面支持的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
用React實(shí)現(xiàn)一個(gè)簡單的虛擬列表
虛擬列表是現(xiàn)在比較常用的前端渲染大數(shù)據(jù)列表的方案,目前也有很多組件庫和工具庫也都有對(duì)應(yīng)的實(shí)現(xiàn),本文將給大家介紹一下如何用React實(shí)現(xiàn)一個(gè)簡單的虛擬列表,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2023-12-12
react-native使用react-navigation進(jìn)行頁面跳轉(zhuǎn)導(dǎo)航的示例
本篇文章主要介紹了react-native使用react-navigation進(jìn)行頁面跳轉(zhuǎn)導(dǎo)航的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
React 18.2.0 引入了一系列并發(fā)機(jī)制的新特性,旨在幫助各位開發(fā)者更好地控制和優(yōu)化應(yīng)用程序的性能和用戶體驗(yàn),下面我們就來看看如何利用這些新特性構(gòu)建更高效、更響應(yīng)式的應(yīng)用程序吧2024-03-03