読者です 読者をやめる 読者になる 読者になる

TypeScriptでReactを書くときはStateのパラメータに?を付ける

TypeScriptでReactを書いているとき、Stateに複数パラメータを用意した時に ? を付けてオプションパラメータにします。
そうしないと、setState の更新時に全てのパラメータを更新しないといけなくなります。

なので、必ず付けろというよりは、パラメータを一つだけ更新したいときにはこうしたほうが良いという話でした。

もうちょっと詳しく

こんな感じで年齢と身長を表示するコンポーネントがあったとします。

import * as React from 'react';

interface IPersonProps {
}
interface IPersonState {
  age: number;
  height: number;
}

/**
 * Person
 */
export class Person extends React.Component<IPersonProps, IPersonState> {
  constructor(props: IPersonProps) {
    super(props);

    this.state = {
      age: 0,
      height: 0
    }
  }

  render() {
    return (
      <div className="person">
        <div>年齢 : { this.state.age }</div>
        <div>身長 : { this.state.height }</div>
      </div>
    );
  }
}

ここで、身長のみを更新するイベントを追加しようとしたとき下記のように書きたくなります。

  handleOnChangeHeight = (height: number) => {
    this.setState({
      height: height
    });
  }

ですが、この場合はコンパイル時エラーになります。
理由は↓です。

interface IPersonState {
  age: number;
  height: number;
}

パラメータがオプションになっていないため両方更新しないといけなくなります。
なので、 ? を付けてオプションパラメータにしてあげます。

interface IPersonState {
  age?: number;
  height?: number;
}

そうすることで、 setState 時に更新したいパラメータだけを更新することができます。