React報錯之Parameter 'props' implicitly has an 'any' type

  • 2022 年 8 月 27 日
  • 筆記

正文從這開始~

總覽

當我們沒有為函數組件或者類組件的props聲明類型，或忘記為React安裝類型聲明文件時，會產生"Parameter 'props' implicitly has an 'any' type"錯誤。為了解決這個錯誤，在你的組件中明確地為props對象設置一個類型。

parameter-props-implicitly-has-any-type.png

安裝類型文件

你首先要確定的是你已經安裝了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經常出現故障，重啟有時會解決問題。

Tags:

VirMach 便宜 VPS