rikuto tech blog

ゆる〜くやってます

React Tutorialを TypeScriptとHooksで書き直してみた②

前回からの続きです。

データを Props 経由で渡す

マスに数字がプロットされた次のようなアウトプットを想定します。

https://ja.reactjs.org/static/685df774da6da48f451356f33f4be8b2/01bf6/tictac-numbers.png

公式チュートリアルでは、

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

// ︙

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value} // "TODO"になっていたところを変更
      </button>
    );
  }
}

でOKでした。

TypeScriptを使う

まず、Squareコンポーネントに渡されるpropsの型エイリアスSquarePropsを定義します。

type SquareProps = {
  value: number;
};

Squareコンポーネントに渡されるのはvalueで、これは0~8の数字なので、number型にします。

次に、Squareコンポーネントは下のようになります。

const Square: VFC<SquareProps> = ({ value }) => (
  <button type="button" className="square">
    {value}
  </button>
);

ジェネリクスVFC<SquareProps>のように書くことで、コンポーネントのpropsの型を指定できます。
SquarePropsからvalueを抜き出し、buttonに表示するシンプルなコードです。

ここまでのコードはこちら
コードの差分はこちら

インタラクティブなコードをつくる

ここは公式チュートリアルと同じです。

  <button
    type="button"
    className="square"
    onClick={() => {
      alert('click');
    }}
  >

チュートリアルにも書かれていますが、注意するポイントはonClick={() => { alert('click'); }です。よくある間違いとして記載してあります。

ここまでのコードはこちら

次回はStateの取り扱いから書いていこうと思います!