ここでは、コンポーネントに状態を持たせ、更新する方法を紹介します。

状態オブジェクトの定義を書く

TypeScriptなので、状態を表すオブジェクトの定義が必要です。interfaceで定義しましょう。ここではカウントを状態として持たせてみます。

// App.tsx
// 余談だが、インターフェース名はIではじめないとtslintに怒られる
interface IState {
  count: number;
}

型引数とコンストラクタを追加する

状態は初期値を与える必要があるので、コンストラクタで初期値を与えるようにします。また、 `React.Component` 継承時に状態オブジェクトの型を引数として指定するようにします。

class App extends React.Component<{}, IState> {
  constructor(props: any) {
    super(props);

    this.state = {
      count: 0
    };

    setInterval(() => {
      this.setState((prevState: IState) => {
        prevState.count++;
        return prevState;
      });
    }, 1000);
  }
  // 中略
}

だいぶ見た目が変わりました。 `React.Component` の型引数の2番目に状態オブジェクトの型を指定します（1番目は 属性オブジェクトの型です）。

スーパークラスのコンストラクタは1引数（か2引数）なので、現時点では1つオブジェクトを受け取り、それをそのまま渡すだけにしておきます。

そして `state` フィールドに初期状態をセットします。

this.state = {
  count: 0
};

状態を表示する

状態を表示するには、 `render()` 内で `{this.state.フィールド名}` でアクセスします。

  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React {this.state.count}</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
      </div>
    );
  }

状態を更新する

状態を更新するには、 `setState()` メソッドを呼びます。初期値を設定したように `state` フィールドを更新する方法だとうまくいきません。ここでは1秒おきにカウントを1つずつ増やすようにしています。

setInterval(() => {
  this.setState((prevState: IState) => {
    prevState.count++;
    return prevState;
  });
}, 1000);