为什么 react 18.2 教程抛出 TS2339 属性'X'类型上不存在 'Readonly<{}>'

Question

我目前正在学习react教程，但有一次我得到了TS2339属性'value'在类型'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 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。