為什么 react 18.2 教程會拋出 TS2339 Property 'X' does not exist on type 'Readonly<{}>'

Question

我目前正在關注反應教程，但有一次我收到TS2339 Property 'value' does not exist on type 'Readonly<{}>'錯誤

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

為什么我會收到此錯誤，但教程工作正常？ 我知道如何通過將屬性添加到 class 或使用接口來修復它。

class Square extends React.Component<{value: string}, {}> {
    render() {
        return (
        <button className="square">
            {this.props.value}
        </button>
        );
    }
}


class Square extends React.Component<ISquare> {
    render() {
        return (
        <button className="square">
            {this.props.value}
        </button>
        );
    }
}

interface ISquare {
  value: string;
}

但是為什么我需要改變一些東西呢？ 據我所知，本教程使用的是相同的 React 版本。

Answer 1

為什么我會收到此錯誤，但教程工作正常？

因為那是 JavaScript 教程，而不是 TypeScript 教程，並且 JavaScript 中沒有類型驗證。

嘗試在 JavaScript 文件中執行React.Component<{value: string}, {}>將是語法錯誤。

但是為什么我需要改變一些東西呢？ 據我所知，本教程使用的是相同的 React 版本。

因為您使用的是 TypeScript 而不是 JavaScript。