Reactのチュートリアルで Property 'value' does not exist on type 'IntrinsicAttributes ... エラー

ReactのTic Tac ToeチュートリアルをTypeScriptでやっている時に出たエラーとその対処方法です。

エラーメッセージ

チュートリアルで、BoardクラスのrenderSquareメソッドを <Square value={i} /> にすると、以下のエラーが出ました：

[ts] Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Square> & Readonly<{ children?: ReactNode; }> & Re...'.

 チュートリアルの段階でこのエラーメッセージはつらい。

対処方法

TypeScriptの場合、コンポーネントのプロパティをあらかじめ定義しておかないといけないようです。

Squareクラスにインターフェースを追加し、

interface ISquareProps {
  value: number;
}

クラス定義を変更すると、

class Square extends React.Component<ISquareProps, {}>

うまくいきました。

React初心者がいきなりTypeScriptでやるのはちょっと厳しかったかな。