TypeScript　型エラー

前提・実現したいこと

謎の型エラーが発生して困っています。
TypeScriptとReactでシンプルなタイマーを作っていてスタート、ストップ、ポーズの至ってシンプルな構造です。

poseの関数を定義している中のclearIntervalの引数this.intervalIdでエラーが発生しています。
一方、componentWillUnmountのClearIntervalの引数this.intervalIdは、特にエラーなどは、発生していません。

なぜpose関数の方は、エラーが発生してしまっているのでしょうか？

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

No overload matches this call.
  Overload 1 of 2, '(intervalId: Timeout): void', gave the following error.
    Argument of type 'Timer | null' is not assignable to parameter of type 'Timeout'.
      Type 'null' is not assignable to type 'Timeout'.
  Overload 2 of 2, '(handle?: number | undefined): void', gave the following error.
    Argument of type 'Timer | null' is not assignable to parameter of type 'number | undefined'.
      Type 'null' is not assignable to type 'number | undefined'.ts(2769)

該当のソースコード

import { Component, ReactElement } from "react";
import './timer.css';

type Props = {limit: number}
type State = {timeLeft: number}

export default class Timer extends Component<Props, State> {
  intervalId: NodeJS.Timer | null = null;
  poseTime: number | null = null;
  constructor(props: Props) {
    super(props);
    this.state = { timeLeft: this.props.limit};
  }

  componentDidUpdate = ():void => {
    const { timeLeft } = this.state;
    if (timeLeft === 0) {this.reset()};
  };

  componentWillUnmount = ():void => {
    if (this.intervalId) {clearInterval(this.intervalId)}
  };

  tick = ():void => {
    this.setState((prevTime) => ({timeLeft : prevTime.timeLeft - 1}))
  };

  start = (): void => {
    this.intervalId = setInterval(this.tick, 1000);
  };

  pose = (): void => {
    clearInterval(this.intervalId);
    console.log(this.intervalId);
    const poseTime = this.state.timeLeft;
  }

  reset = ():void => {
    const limit = this.props.limit;
    this.setState({timeLeft: limit});
  };

  render = (): ReactElement => {
    const {timeLeft} = this.state;
    return(
      <div className="container">
        <h1>タイマー</h1>
        <p className="countNum">{timeLeft}</p>
        <div className="btn-wrapper">
        <button onClick={this.start}>START</button>
        <button onClick={this.reset}>RESET</button>
        <button onClick={this.pose}>POSE</button>
        </div>
      </div>
    )
  }
}

hoshi-takanori

2021/03/21 00:53

componentWillUnmount では null じゃないことを確認してから clearInterval を呼んでるけど、pose では確認してないからでしょうね。ちなみに、pose じゃなくて pause では。 https://www.e-bunpou.net/pause-pose.html