TypeScriptとReactでsetIntervalを扱う方法について

Question

TypeScriptとReactを学習中で、Reactの公式ドキュメントに載っているコードをTypeScriptで書いてみているのですが、
このページに載っている、時計機能のコードで行き詰まっています。

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface clockState {
    date: Date
}

class Clock extends React.Component<clockState> {
    constructor(props) {
      super(props);
      this.state = {date: new Date()};
    }
  
    componentDidMount() {
      this.timerId = setInterval(
        () => this.tick(),
        1000
      );
    }
  
    componentWillUnmount() {
      clearInterval(this.timerId);
    }
  
    tick() {
      this.setState({
        date: new Date()
      });
    }
  
    render() {
      return (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        </div>
      );
    }
  }
  
  ReactDOM.render(
    <Clock />,
    document.getElementById('root')
  );

この状態では timerId の型が定義されていないのでエラーとなるのですが、
TypeScriptではどこで timerId を定義すればよいのでしょうか？
prop として定義するとread-onlyになってしまうので、後で setInterval の処理を行うことができません。
state として定義する場合、 clearInterval の処理をどう行えばいいかよくわかっていません。

どのように書くとよいでしょうか？

Answer 1

setIntervalが返す値は正のnumberですので、実際に試したわけではないですが、コンストラクタでthis.timerId = 0;のようにnumberの値を代入しておく、という方法が考えられます。

Comments

[Udomomo]

このやり方でうまくいきました！ありがとうございます。