TypeScript+Reactで、stateの値に定数を加えるとundefinedエラーが出る

Question

前提

TypeScript＋Reactでカウントアップボタンを作ろうとしています。

実現したいこと

ボタンをクリックすると、表示されている数値を1増やす

発生している問題・エラーメッセージ

setStateにて値を更新しようとするとundefinedとなり、エラーが出てしまいます。
後述しますが、値を更新しない（＝1を加算しない）とエラーが出ませんでした。

Compiled with problems:X

ERROR in src/App.tsx:39:14

TS2532: Object is possibly 'undefined'.
    37 |   onClick() {
    38 |     this.setState({
  > 39 |       count: this.state.count + 1,
       |              ^^^^^^^^^^^^^^^^
    40 |     });
    41 |   }
    42 |

該当のソースコード

import React from 'react';
import ReactDOM from 'react-dom/client';
import logo from './logo.svg';
import './App.css';
import { isConstructorDeclaration } from 'typescript';


interface IState {
  count?: number;
}

interface Props {
  count?: number;
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <LikeButton />
        </header>
      </div>
    );
  }
}

class LikeButton extends React.Component<Props, IState> {
  constructor(props: Props) {
    super(props);
    this.state = {
      count: 999,
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  render() {
    return (
      <span
        className='likeButton'
        onClick={this.onClick}>♥{this.state.count}</span>
    );
  };
}

export default App;

試したこと

this.state.count + 1の部分を、this.state.countにするとエラーメッセージが消えるようです。

Compiled with problems:X

ERROR in src/App.tsx:39:17

TS2532: Object is possibly 'undefined'.
    37 |   onClick() {
    38 |     console.log(this.state.count);          // これは通る
  > 39 |     console.log(this.state.count + 1);      // これは通らない

1を加算するかどうかでundefinedかどうかが変わってしまう挙動に見えるのですが、なぜこうなるのかが理解できず・・・。
エラー原因、解決方法を教えていただけるとありがたいです。

補足情報（FW/ツールのバージョンなど）

https://typescriptbook.jp/tutorials/react-like-button-tutorial
上記コードはこちらのサンプルをベースにしています

Comments

[hoshi-takanori]

IState で count? だからでは。

Answer 1

エラーメッセージのとおり、countにundefinedが入りうると宣言されているため、計算ができません。

特にその必要がないなら、undefinedが入らない形で宣言しておきましょう。

interface IState {
  count: number; // ?を外す
}

Answer 2

maisumakunさん
hoshi-takanoriさん

ご指定いただいた通り？を取り除くことで無事解決しました。
初歩的な質問にご丁寧にありがとうございました。