React のチュートリアルを Typescript でやってみた1（チュートリアル概要）

目次

• React のチュートリアルを Typescript でやってみた【環境構築編】
• React のチュートリアルを Typescript でやってみた【環境構築編2】
• React のチュートリアルを Typescript でやってみた【ソース準備編】
• React のチュートリアルを Typescript でやってみた1 ←ここ
• React のチュートリアルを Typescript でやってみた2
• React のチュートリアルを Typescript でやってみた3

概要

チュートリアル通りにやりますが、端折る箇所もあると思います。
各々補完をお願いいたします。

公式のチュートリアルページ

• チュートリアル：React の導入

今回の実施チュートリアル内容

• データを Props 経由で渡す
• インタラクティブなコンポーネントを作る

データを Props 経由で渡す

チュートリアルのページではjsのコードが書かれていますが、Typescriptではエラーとなります。
よってTypescriptで動作するように書き換えていきます。

まずは、Propsの中身を定義する必要があるためPropsを定義します。
今回はnumberを渡すため以下の様に定義

square.tsx

type Props = {
  value: number
}

Typescriptでは、Propsは引数で当てる必要があるため以下の様に引数で値を渡します。

square.tsx

- class Square extends React.Component {
+ class Square extends React.Component<Props> {

あとはvalueを表示するよう書き換え

square.tsx

  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }

また、squareにデータを渡す箇所も書き換えます。
square.tsxで定義したPropsのvalueにデータを渡すイメージです。

board.tsx

  renderSquare(i: number) {
    return <Square value={i} />;
  }

以上で無事にProps経由でデータを渡すことができました。

インタラクティブなコンポーネントを作る

Squareコンポーネントがクリックされた場合”X”と表示されるようにします。
まずは、チュートリアルに沿ってクリックされたらアラートが表示されるように書き換え。

square.tsx

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

コンポーネントをクリックするとアラートが表示される状態になりました。

次にstateをTypescriptで実装してみます。

Porps同様にStateも定義します。
"X"を表示するためStringにしました。

square.tsx

type State = {
  value: String
}

クラスのコンストラクタ定義は以下のようにしました。
Stateのvalueの部分ですが、Stringにnullは設定できなかったので空文字にしました。
type squareValue String | null なんかを当ててやればnullも定義できると思います。

square.tsx

class Square extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      value: ""
    };
  }

最後にクリックの部分を実装します。
しかしこの部分に関してはチュートリアルにかかれているもので問題ありませんでした。

square.tsx

  render() {
    return (
      <button className="square" onClick={() => this.setState({ value: 'X' })}>
        {this.state.value}
      </button>
    );
  }

今回は以上になります。
次回はゲーム部分の実装を進めていきます。

最終的なソースは以下
https://github.com/humi3/react-tutorial/tree/tutorial_1