LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-06-18

目次

概要

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

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

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

  • データを 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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1